这是父组件向子组件传递数据：
<!DOCTYPE HTML><HTML><head> <Title></Title> <Meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" /> <script src="./vue.Js"></script> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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> <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.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> 总结 以上是内存溢出为你收集整理的父子组件间的数据传递全部内容，希望文章能够帮你解决父子组件间的数据传递所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）