文章目录
大家好，我是夏小花
下面是关于vue中父子组件通信案例，首先是父组件向子组件传递数据，然后子组件向父组件进行传递数据，代码中有序号标注的步骤，以及我画的一张逻辑图，结合代码去理解通信原理以及父子通信流程。
上干货
代码比较长，注释可能会有些乱，注意看下具体步骤，看不明白的私信！！！
首先这边我是通过在vue官网直接下载vue.js，直接引入到代码中；
共分为7步，父组件传递子组件进行动态绑定input—>当子组件input发生改变时子组件发布事件—>父组件进行事件监听从而实现双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 父组件模板 --> <div id="app"> <!-- 7.父组件监听子组件发射的事件,进行双向绑定 双向绑定父组件和子组件进行相互通信:number1="num1"--> <cpn :number1="num1" :number2="num2" @num1change="num1change" @num2change="num2change"/> </div> <!-- 子组件模板 --> <template id="cpn"> <div> <!-- 显示父组件传来的值 --> <h2>props: {{number1}}</h2> <h2>data: {{dnumber1}}</h2> <!--<input type="text" v-model="dnumber1">--> <!-- :value 实现双向绑定 @input当用户输入内容进行改变时,num1Input监听事件方法--> <input type="text" :value="dnumber1" @input="num1Input"> <h2>props: {{number2}}</h2> <h2>data: {{dnumber2}}</h2> <!--<input type="text" v-model="dnumber2">--> <!-- :value="dnumber2实现双向绑定 @input当用户输入内容进行改变时,num2Input监听事件方法--> <input type="text" :value="dnumber2" @input="num2Input"> </div> </template> <script src="../JS/vue.js"></script> <script> const app = new Vue({ el: '#app', // 1.Vue实例中定义两个属性: num1和num2 data: { num1: 1, num2: 0 }, //实现事件方法 methods: { num1change(value){ this.num1 = parseInt(value); }, num2change(value){ this.num2 = parseInt(value); } }, //注册组件 components: { cpn: { template: `#cpn`, // 2.子组件定义两个属性,接收父组件传来的值: num1和num2 props: { number1: Number, number2: Number }, // 3.将number1和number2赋值给dnumber1和dnumber2进行初始化,用来对input进行双向绑定 data(){ return { dnumber1: this.number1, dnumber2: this.number2 } }, // 4.定义methods,处理函数,处理num1Input事件 methods: { num1Input(event){ //当子组件文本框值改变时,父组件中的值也进行改变 // 5.当input中的值发生改变时,将input的值赋值到dnumber1进行双向绑定 this.dnumber1 = event.target.value; // 6.改变父组件值时(子组件向父组件传值),发布事件 this.$emit('num1change',this.dnumber1); // 当input1中的值发生改变时,input2中的值(dnumber2)的倍数*100进行显示 this.dnumber2 = this.dnumber1 * 100; //改变父组件值时(子组件向父组件传值),发布事件 this.$emit('num2change',this.dnumber2) }, //处理num2Input事件 num2Input(event){ //当父组件文本框值改变时,子组件中的值也进行改变 //当input中的值发生改变时,将input的值赋值到dnumber2进行双向绑定 this.dnumber2 = event.target.value; //改变父组件值时(子组件向父组件传值),发布事件 this.$emit('num2change',this.dnumber2); // 当input2中的值发生改变时,input1中的值(dnumber2)的倍数/100进行显示 this.dnumber1 = this.dnumber2 / 100; //3.同时修饰dnumber2的值 this.$emit('num1change',this.dnumber1) } } } } }) </script> </body> </html>
运行截图
流程图
后期我会将vue组件化知识点，陆续分享到我的博客中。
![[vue2/vue3] -- 深入剖析v-model的原理、父子组件双向绑定的多种写法](https://ucc.alicdn.com/pic/developer-ecology/iwb4s2erfjeee_d14da44e4e4d4f2ab6c458dc8c34c9f5.png?x-oss-process=image/resize,h_160,m_lfit)