事件命名才用 "-" 分割。(不采用驼峰,因为html是大小写不敏感)
.sync 修饰符的使用
通常用于子组件调用父组件方法,实现子组件主动与父组件进行通讯。
//这里注册了一个全局组件 Vue.component('my-component',{ template:``, methods:{ clickMe(){ this.$emit('my-fun',123) } } }) var vm = new Vue({ el:'#app', methods:{ parentFun(value){ alert(value); } } })
这时点击子组件的按钮时,弹出了123。这里的 @my-fun='parentFunc' 就是创建了一个调用父组件parentFun方法的事件my-fun。然后在子组件通过this.$emit('my-fun',123)就可以触发事件。
作用:用于实现父子组件数据的双向绑定 (语法糖)
原理:通过.sync绑定的父子组件的值。实际上上Vue自动为子组件创建一个事件,用来改变父组件值,而事件名默认为: update: prop值。以下面案例进行说明:
通过在子组件添加: :child-value.sync ='value'。 Vue看到 .sync关键字会自动为子组件创建一个叫做 update:childValue或者update:child-value的事件。(这两种事件名都可以成功调用) 这个事件可以接受参数,并自动将参数赋给父组件的 value。可以理解为事件是引用了这样的方法
" (value) => this.value = value " 可以看到在后面子组件的input的触发方法我成功调用事件,将子组件的 输入传递给父组件。
修改父组件的值:
父组件的值:{{value}}
Vue.component('myComponent',{ props:['childValue'], template:`修改子组件的值:
子组件的值:{{ myData }}
`, data(){ return{ myData: this.childValue } }, methods:{ inputFun(e){ const value = e.target.value; this.myData = value; this.$emit('update:childValue',value) } }, watch:{ 'childValue':function(val){ this.myData = val; this.$refs.inputID.value = this.myData; } } }) var vm = new Vue({ el:'#app', data:{ value:'', }, })
最终效果图: 改变父组件的值 或是 改变子组件的值,父子组件都会跟着变化。
因为这里涉及到修改子组件的值,所以没有让直接绑定props值。Vue并不推荐在子组件中修改props的值 ( 具体可以参考: Vue中props的用发 )。 所以选择将props当作data值的初始值。又因为props只被用作为初始值,所以当父组件的值发生改变,引发子组件的props值发生改变,并不是传递给子组件的data属性。所以这里使用watch来监听props的值,实时的改变data的值。
转自简书:没有鱼丸_b12f
原文链接:https://www.jianshu.com/p/1d205355e2fb
页面更新:2024-05-13
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号