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方法。

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