前端mvvm框架vue.js(3)——父子组件通信

vue.js父子组件通信:1,父组件向子组件传递数据,通过props,注意数据绑定是单向的(借鉴了react);2,子组件向父组件传递数据,通过在子组件自定义事件,使用this.$dispatch()触发自定义事件,事件冒泡到父组件,同时在父组件内通过events或者methods,声明回调函数,同时通过this.$dispatch()传递的参数将传给父组件在events和methods中的会调函数,此时可以在回调函数中操作参数。

1,父组件向子组件传递数据

//props传递父组件数据,默认为单向绑定,注意:字面量语法传递的是字符串,如需要传递实际数值,需使用动态语法v-bind:或缩写模式:(也即可以看成是表达式的方式),支持修饰符.sync和.once绑定修饰符,绑定动态props,注意使用驼峰形式的props时,需要转换为短横杠的形式 Vue.component("child",{ props:{ myMessage:{ type:String, required:true, coerce:function(str){ return str.slice(2); } } }, template:"{{myMessage}}" }); var propVM=new Vue({ el:"#prop", data:{ parentMSG:"" } }) //此例中我们通过v-model将input中的数据绑定到父组件模板中,此时input和父组件数据是双向绑定,input数据传递给在子组件中定义的props,再将props传递给子组件中的span子元素,实时更新

2,子组件向父组件传递数据


Message:{{messages|json}}

//通过methods方法时,注意需要在父组件模板中的子组件上绑定事件 //通过events方法时,只需在父组件的选项对象中events,写入child-msg方法 //我们还可以在父组件事件监听回调中,通过props将数据传回个子组件
Vue.component("child",{ template:"#child-template", data:function(){ return {msg:"hello"}; }, methods:{ //这里是button按钮点击后的事件处理函数 notify:function(){ if(this.msg.trim()){ //在这里我们绑定了一个子定义的事件child-msg,同时传入一个参数,此参数可以传递给父组件的事件回掉函数 this.$dispatch("child-msg",this.msg); this.msg=""; } } } }); var eventParent=new Vue({ el:"#events-example", data:{ messages:[] }, props:{parentprop:""}, //我们可以在这里注册子组件自定义事件监听回调 methods:{ // handleIt:function(msg){ // console.log("子组件回调函数"); // this.messages.push(msg); // } }, //同时我们也可以在events中注册子组件自定义事件监听回调 events:{ "child-msg":function(msg){ this.messages.push(msg); this.parentprop=msg; console.log("子组件事件被触发"); } } })

你可能感兴趣的:(前端mvvm框架vue.js(3)——父子组件通信)