vue 方法获取返回值_vue中子组件怎么获取父组件中的方法的返回值
楼主解决了吗?好像通过@自定义方法名='父组件的方法名'这样绑定到子组件里面取不行,只能通过:自定义方法名='父组件方法名',然后在子组件中的props:['自定义方法名'],再在子组件中要使用的地方使用this.自定义方法名
父组件:
v-for="item in list" :key="item.id">
{{item.content}}
{{item.user}}
import commentChilder from './comment-childer'
export default {
components: {
'comment-childer' : commentChilder
},
data () {
return {
list: [
{id: this.uuid(), user: '李白', content: '天生我材必有用'},
{id: this.uuid(), user: '王健林', content: '先赚它一个亿'},
{id: this.uuid(), user: '雷军', content: '站在风口上,猪都能飞起来'}
]
}
},
created () {
this.loadComment()
},
methods: {
//uuid是return一个字符串
uuid() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
loadComment () {
if (localStorage.getItem('cmts')) {
var list = JSON.parse(localStorage.getItem('cmts'))
this.list = list;
}
}
}
}
子组件:
评论人:
评论内容:
export default {
components: {
},
data () {
return {
user : null,
content : null
}
},
//然后在再props这里引入父组件中传入的:自定义方法名
props: ['createUuid'],
methods: {
addContent () {
if(this.user !== null && this.content !== null){
//在子组件中this.自定义方法名,才能使用
//因为在父组件中createUuid()对应的方法是return的,这样的话我每次触发addContent方法就会重新生成一个新的uuid
var content = {id: this.createUuid(), user: this.user, content: this.content}
console.log('id is: ' + this.createUuid())
var list = JSON.parse(localStorage.getItem('cmts') || '[]')
list.unshift(content)
localStorage.setItem('cmts', JSON.stringify(list))
this.user = this.content = null
this.$emit('loadComment')
} else {
alert("评论人或内容不能为空!");
}
}
}
}
vue 方法获取返回值_vue中子组件怎么获取父组件中的方法的返回值相关推荐
- VUE子组件如何改变父组件传来的值,以及VUE子组件如何修改父组件的值,以及父组件修改子组件的值
一)子组件修改父组件传来的值: 父组件传递给我一个名为deptName数据,但是现在我要在子组件中修改它的值并且实时更新页面,直接this.deptName是不能直接修改他的值的,所以我采用了使用一个 ...
- vue中的一个子组件如何在父组件中调动另一个子组件中的方法
第一:在子组件通过用绑定事件,来到达父元素(主要通过this.$emit来和父组件达成联系) /*******主要原理跟vuex差不多********/ 1.template部分代码 <temp ...
- VUE:父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
- 什么是VUE的父组件和子组件?那么父组件和子组件又是怎样传值的呢?
有时候我们经常分不清什么是父组件,什么又是子组件.现在来简单说下:我们将某段代码封装成一个组件,而这个组件又在另一个组件中引入,而引入该封装的组件的文件叫做父组件,被引入的组件叫做子组件.以上是我个人 ...
- React子组件给父组件传值, 父组件引用子组件并给子组件传值
本博客代码是 React 父组件和子组件相互传值的 demo:实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图:效果图如下: 父组件代码: 代码解析: ...
- 有如下值集合[11,22,33,44,55,66,77,88,99,90], 将所有大于66的值保存至字典的第一个key中,将小于66值保存至第二个key的值
1.有如下值集合[11,22,33,44,55,66,77,88,99,90], 将所有大于66的值保存至字典的第一个key中,将小于66值保存至第二个key的值 num = {11,22,33,44 ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component {construtor(props){super(props);thi ...
- vue组件通信之父组件主动获取子组件数据和方法
ref 可以用来获取到dom节点,如果在组件中应用,也可以用来获取子组件的数据和方法. 比如,我定义了一个home组件,一个head组件,home组件中引用head组件. 此时,home组件是head ...
- vue 子组件调用($emit)父组件方法后父组件方法如何回调子组件方法
子级组件中的实现 组件名称:EditTable.vue export default{ name:'ET', ....... methods:{ ShowMore(step){ ...
最新文章
- 在虚拟机中快速安装 Ubuntu 18.04
- Containers vs Serverless
- java中JScrollPane不显示水平滚动条的解决办法
- 连续投影算法_中航国画荣获“2020 IAV国际视听嘉年华” 大屏幕投影显示行业三大奖项!...
- redis数据批量导入导出
- 《剑指Offer》60:n个骰子的点数
- linux驱动基础开发3——linux 内核配置机制(make menuconfig、Kconfig、makefile)讲解-转
- vs2019配置opencv4.3
- Hystrix熔断机制原理剖析
- python自动发微信api_调用微信API发送微信消息python脚本
- 串口屏和并口屏的区别?
- 联想笔记本prtsc不能截图_Win10系统下怎么截屏
- 1194. 锦标赛优胜者
- 物联网嵌入式学习路线
- php判断是否连续出现数字,php通过gbk编码判断 含有连续数字 可用于判断QQ号,手机号等。...
- origin画图---学习时遇到的画图记录
- 中国AR智能隐形眼镜市场竞争态势与投资规划分析报告2022-2028年
- 编程实战赛来啦!B站周边、高级会员等好礼送你啦!
- docker 搭建本地 coredns 服务器
- NFT - 2022年科技圈新宠