父子组件传值
示例：父组件向子组件传递数据
在 Vue 中 ，父组件向子组件传值，通过属性的方式来进行传递
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >父子组件传值</ > < src="./vue.js"></ ></head><body> <div id="root"> <counter :count="0"></counter> <counter :count="1"></counter> </div> < > var counter ={ props:['count'], template: '<div>{{count}}</div>' } var vm = new Vue({ el:'#root', components:{ counter:counter //局部组件 }, }); </ ></body></html>输出：
加入累加功能
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >父子组件传值</ > < src="./vue.js"></ ></head><body> <div id="root"> <counter :count="0"></counter> <counter :count="1"></counter> </div> < > var counter ={ props:['count'], template: '<div @click="handleClick">{{count}}</div>', methods:{ handleClick:function(){ this.count++ } } } var vm = new Vue({ el:'#root', components:{ counter:counter //局部组件 }, }); </ ></body></html>输出：虽然实现功能，但在控制台一直在报错，不要直接修改父组件传递来的数据
在 Vue 中，单项数据流：父组件可以向子组件通过属性的形式传递参数，传递来的参数可以随意修改，
但是，子组件绝对不能修改父组件传递过来的参数，只可以使用；这个过程是单向的；
因为父组件可能给多个子组件传递数据，如果子组件可以修改的话就会给其他组件的调用带来错误的数据；
解决上面这个问题：从父组件接收到 count 数据,将 count 数据复制一份放到 子组件自己的 data 中，在后续的操作
中就不用再使用 count 了，用自身 data 中的 number 内容即可
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >父子组件传值</ > < src="./vue.js"></ ></head><body> <div id="root"> <counter :count="0"></counter> <counter :count="1"></counter> </div> < > var counter ={ props:['count'], data:function() { return { number: this.count } }, template: '<div @click="handleClick">{{number}}</div>', methods:{ handleClick:function(){ this.number++ } } } var vm = new Vue({ el:'#root', components:{ counter:counter //局部组件 }, }); </ ></body></html>输出：功能实现，且不会报错
示例：子组件向父组件传递数据
在 Vue 中 ，子组件向父组件传递数据通过事件触发的形式来进行传值
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < >父子组件传值</ > < src="./vue.js"></ ></head><body> <div id="root"> <counter :count="0" @change="handleIncrease"></counter> <counter :count="1" @change="handleIncrease"></counter> <div>{{total}}</div> </div> < > var counter ={ props:['count'], data:function() { return { number: this.count } }, template: '<div @click="handleClick">{{number}}</div>', methods:{ handleClick:function(){ this.number++ this.$emit('change',1) //每次总数+1 } } } var vm = new Vue({ el:'#root', data:{ total:1 }, components:{ counter:counter //局部组件 }, methods:{ handleIncrease:function(step){ //步长 this.total += step } } }); </ ></body></html>输出：每次点击都会累加点击次数
继续阅读与本文标签相同的文章
-
SQL--( 初识 MyBatis)
2026-05-26栏目： 教程
-
SQL--(MyBatis 实战）
2026-05-26栏目： 教程
-
初识 Vue（28）---（Vue 中的动画封装）
2026-05-26栏目： 教程
-
初识 Vue（27）---（Vue 中的列表过渡）
2026-05-26栏目： 教程
-
初识 Vue（26）---（ Vue 中多个元素或组件的过渡动画）
2026-05-26栏目： 教程