vue.js官方教程上講的也挺清楚的了，自己整理一遍以加深印象，同時也完成自己的項目中需要的動態創建表單提交編輯修改功能。
表單主要是v-model雙向綁定實現父組件與子組件的雙向數據傳遞，所以首先說一下組件之間的通信。

組件通信

父組件向子組件傳值 props

// 子組件 Vue.component("my-com",{template:"<div>{{msg}}===={{info}}</div>",props:["msg"], //必須是字符串形式data:function(){ return {info:"子組件的信息"}} });// 使用時 <my-com :msg="message"></my-com> // 必須使用v-bind綁定，不然傳遞的是字符串var app=new Vue({el:"#app",data:{message:"父組件的內容"} }); 復制代碼

子組件向父組件傳遞$emit()

//邏輯是，給子組件添加事件，子組件事件觸發時，往上觸發父組件的事件，并且給事件傳值，父組件即可獲得子組件的值并在事件中處理 Vue.component("my-com",{template:'<button type="button" @click="add">點擊+1</button>',data:function(){return {count:0}},methods:{add(){this.count++;this.$emit("from-son",this.count);}} })// 使用時 <my-com @from-son="add1"></my-com> // 觸發from-son事件，接收到子組件的數據var app=new Vue({el:"#app",data:{msg:""},methods:{add1(value){this.msg=value;}} }) 復制代碼

雙向數據傳遞 v-model

由前面分析可以看出，實現雙向綁定的話，就是同時有props傳遞，又有$emit()觸發
首先，<input v-model="text">等價于：

<input v-bind:value="text" v-on:input="text=$event.target.value"> 復制代碼

因此組件要使用v-model,也需要：

<my-componentv-bind:value="text" //父向子傳遞v-on:input="text=$event.target.value" //子向父傳遞 ><my-component> 復制代碼

所以子組件必須滿足：

Vue.component("my-component",{template:'<div @click="fn"></div>'props:['value'],methods:{fn(event){this.$emit("input",event.target.value)}} })復制代碼

轉載于:https://juejin.im/post/5ccba9cce51d453ab5096a79

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue学习笔记(1)-组件通信的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。