西安个人建网站,什么是顺联网络营销,丹东网络推广,如何用ps做网站文章目录 前言一、通过this.$emit触发父组件方法实现二、.sync修饰符与$emit(update:xxx) 前言
看了几篇帖子#xff0c;都没有将$emit两种用法汇聚总结在一起。需要额外的浪费时间去查看其他帖子#xff0c;索性自己总结一下#xff0c;方便以后查看。 一、通过this.$emit… 文章目录 前言一、通过this.$emit触发父组件方法实现二、.sync修饰符与$emit(update:xxx) 前言
看了几篇帖子都没有将$emit两种用法汇聚总结在一起。需要额外的浪费时间去查看其他帖子索性自己总结一下方便以后查看。 一、通过this.$emit触发父组件方法实现
这种方法调用是我平常最熟悉的通过触发事件使父组件拿到子组件传递过来的值。
//父组件将定义的方法传递给子元素
templatediv classfatherh1我是父组件/h1Son :msgmsg changeMsgchangeMsg//div
/templatescript
import Son from /components/Son.vueexport default {name: Father,components: {Son},data(){return{msg:1}}methods:{changeMsg(text,num){console.log(text,num);this.msgthis.msg1}},
}
/script//子组件通过this.$emit触发父组件方法更改父组件数据同时可以进行数据传值
templatediv classsonh1我是子组件button clickchangeFatherData点我更改父组件数据/button/h1h1父组件数据{{msg}}/h1/div
/templatescript
export default {name: Son,props: {msg: Number,},data(){return{text:我是子组件数据我要发送给父组件,num:12}},methods:{changeFatherData(){this.$emit(changeMsg,this.text,this.num)}},
}
/script注意 this.$emit(‘changeMsg’,this.text,this.num) Son :msg“msg” changeMsg“changeMsg”/ $emit中的changeMsg方法名称要和changeMsg名称一样
二、.sync修饰符与$emit(update:xxx) .sync 修饰符可以实现子组件与父组件的双向绑定并且可以实现子组件同步修改父组件的值。 //父组件将定义的方法传递给子元素
templatediv classfatherh1我是父组件/h1Son :msg.syncmessage //div
/templatescript
import Son from /components/Son.vueexport default {name: Father,components: {Son},data(){return{message:1}}
}
/script//子组件通过this.$emit触发父组件方法更改父组件数据同时可以进行数据传值
templatediv classsonh1我是子组件button clickchangeFatherData点我更改父组件数据/button/h1h1父组件数据{{msg}}/h1 /div
/templatescript
export default {name: Son,props: {msg: Number,},data(){return{num:12}},methods:{changeFatherData(){this.$emit(update:msg,this.num)}},
}
/script子组件触发changeFatherData方法msg信息就会变为12 本质
son :a.syncnum/son 等价于
son:anum update:aval num val
/son
// 相当于多了一个事件监听事件名是 update:a回调函数中会把接收到的值赋值给属性绑定的数据项中。参考文字 vue中子组件更改父组件数据 Vue .sync修饰符与$emit(update:xxx)
