Vue父子组件之间的传值(简单易懂)

使用vue进行项目开发的时候，免不了组件之间的通信。父组件传递给子组件的值，子组件可以通过props获取。子组件想要改变数据，Vue是禁止子组件直接向父组件传值的,只能通过触发事件的方式告诉父组件，下面用代码通俗易懂的方式分享给大家

1.父组件传值给子组件

父组件代码:

<template>
  <div>
    <parent>
      //用引入的子组件命名标签名通过冒号绑定把值传给子组件
      <child :parentToChild="value1"></child>
    </parent>
  </div>
</template>
<script>
// 引入子组件
import child from "../../components/child"
export default {
  data () {
    return {
    //把要传的值在data中定义
      value1:'父组件的值传给子组件'
    }
  },
  //注册子组件
  components: {
    child
},
  mounted () {},
  watch: {},
  methods: {}
}
</script>

子组件代码:

<template>
  <div>
    <p>这是子组件</p>
    {{valueFromParent}}
  </div>
</template>
<script>
// 引入子组件
import child from "../../components/child"
export default {
  data () {
    return {
      valueFromParent:'',
    }
  },
  //通过props接受,接受的字段与父组件绑定的字段要一致
  props: ['parentToChild'],
  components: {
	child
},
  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>
// 引入子组件
import child from "../../components/child"
export default {
  data () {
    return {
      value1:'这是要传给父组件的值',
      value2:'可以传多个值',
      value3:false,
    }
  },
  components: {
  	child
  },
  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>
// 引入子组件
import child from "../../components/child"
export default {
  data () {
    return {}
  },
  components: {
	child
},
  mounted () {},
  watch: {},
  methods: {
    getValueFromChild(value1,value2,value3,value4){
      //打印值分别是
      //value1: 这是要传给父组件的值
      //value2: 可以传多个值
      //value3: false
      //value4: true
    }
  },
  created(){}
}
</script>

从中可以看出，子组件通过sendValueToParent事件方法，向父组件传递了4个值，在父组件的子组件标签里面要写上sendValueToParent这个事件。父组件拿到这四个值是通过getValueFromChild方法。

大家看的时候，父子组件对应看，相信很容易看懂的