父子组件间的数据传递

2025-01-18 技术教程

vue当中有个单向数据流的概念，也就是：父组件可以向子组件传递/修改参数(通过属性的方式传)，但子组件不可以反过来修改父组件传递过来的参数！（因为怕子组件改了父组件引用类型的数据，可能会影响到其他组件）。那怎样解决这个问题？可以复制给子组件自己的变量，然后子组件修改自己的变量啊！
这是父组件向子组件传递数据：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body><div id="root"> //加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br> <counter :count="1"></counter> <counter :count="2"></counter></div><script type="text/javascript"> //父组件是通过属性的方式向子组件传递数据的 //局部组件，需要注册 var counter = { props: ["count"], //子组件接收父组件传过来的内容 data: function() { return { number: this.count //从父组件接收count数据，复制到子组件自己data的变量number里 } }, /*template: "<div @click='handleClick'>{{count}}</div>",*/ //既然子组件不应该修改父组件传过来的值，那就修改自己的咯 template: "<div @click='handleClick'>{{number}}</div>", methods: { handleClick: function() { /*//这种方式虽然可以实现，但会警告：不要直接修改父组件传递过来的属性! this.count++ */ //所以给子组件自己的number++，而不是父组件的count++ this.number++ } } } var vm = new Vue({ el: "#root", components: { counter: counter } })</script></body></html>

子组件向父组件传递数据：

<!DOCTYPE html><html><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="./vue.js"></script> </head><body><div id="root"> //加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br> //这个模版属于根组件，所以handleInc方法也要写在根组件 <br> <counter :count="3" @change="handleInc"></counter> <counter :count="2" @change="handleInc"></counter> <div>{{total}}</div></div><script type="text/javascript"> //父组件是通过属性的方式向子组件传递数据的 //局部组件，需要注册 var counter = { props: ["count"], data: function() { return { number: this.count } }, //既然子组件不应该修改父组件传过来的值，那就修改自己的咯 template: "<div @click='handleClick'>{{number}}</div>", methods: { handleClick: function() { this.number++ //点击子组件，触发change事件，告诉父组件，自己增加了1（可以自己命名事件，不一定要是change） this.$emit("change", 1) } } } var vm = new Vue({ el: "#root", components: { counter: counter }, data: { total: 5 }, methods: { //接收到子组件中的参数step(这里是this.$emit("change", 1)中的1)，参数可以随意命名的，不一定要叫step handleInc: function(step) { this.total += step } } })</script></body></html>