vue父子组件之间通信（传值） - 好文

使用vue进行项目开发的时候，免不了组件之间的通信。父组件传递给子组件的值，子组件可以通过props获取。子组件想要改变数据，只能通过触发事件告诉父组件，我要变身了！父组件接收到信号，从而达到改变的目的。

1、父组件传值给子组件

父组件：
<template> <div> <parent> <child :parentToChild="value1"></child> </parent>
</div> </template> <script> export default { data () { return {
value1:'父组件的值传给子组件' } }, components: {}, mounted () {}, watch: {}, methods: {}
} </script>
子组件：
<template> <div> <p>这是子组件</p> </div> </template> <script> export default {
data () { return { valueFromParent:'', } }, components: {}, props:
['parentToChild'], mounted () {}, watch: {}, methods: {}, created(){
this.valueFromParent = this.parentToChild } } </script>

可以看出，父组件要传递给子组件的值为value1，key为parentToChild，在子组件接收时，用props接收。此时，如果打印this.valueFromParent，打印结果会是：父组件的值传给子组件

2、子组件向父组件通信

vue是禁止子组件直接向父组件传值的，所以只能通过触发事件来达到目的。

子组件：
<template> <div> <p>这是子组件</p> <button @click="clickEvent">点击按钮</button> </div>
</template> <script> export default { data () { return { value1:'这是要传给父组件的值',
value2:'可以传多个值', value3:false, } }, components: {}, props: [], mounted () {},
watch: {}, methods: { clickEvent(){
this.$emit('sendValueToParent',this.value1,this.value2,this.value3,true); } },
created(){} } </script>
父组件：
<template> <div> <p>这是父组件</p> <parent> <child @sendValueToParent =
"getValueFromChild"></child> </parent> </div> </template> <script> export
default { data () { return {} }, components: {}, mounted () {}, watch: {},
methods: { getValueFromChild(value1,value2,value3,value4){ //打印值分别是 //value1:
这是要传给父组件的值 //value2: 可以传多个值 //value3: false //value4: true } }, created(){} }
</script>
从中可以看出，子组件通过sendValueToParent事件方法，向父组件传递了4个值，在父组件的子组件标签里面要写上sendValueToParent
这个事件。父组件拿到这四个值是通过getValueFromChild方法。

大家看的时候，父子组件对应看，相信很容易看懂的，如有错误的地方，欢迎留言。

热门工具换一换