vue 父子组件之间传值(通信)

1.父组件传给子组件 

在父组件用v-bind  也是缩写的:   绑定要传给子组件的值

<template>
  <div>
    <parent>
      <child :parentToChild="value"></child>
    </parent>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value:'父组件的值传给子组件'
    }
  },
}
</script>

在子组件用props接收父组件传过来的值

<template>
  <div>
    <p>我是子组件</p>
  </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
  props: ['parentToChild'],
  mounted () {
  console.log(this.parentToChild)//拿到父组件传过来的值
},
 
}
</script>

2.子组件传给父组件

在子组件用$emit发射

<template>
  <div>
    <p>这是子组件</p>
    <button @click="clickEvent">点击触发事件向父组件发射</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value:'这是要传给父组件的值',
    }
  },
  methods: {
    clickEvent(){
      this.$emit('sendValueToParent',this.value);
    }
  },
}
</script>

父组件

<template>
  <div>
    <p>这是父组件</p>
    <parent>
      <child @sendValueToParent = "getValueFromChild"></child>
    </parent>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    getValueFromChild(value){
     console.log(value)//拿到子组件的值
    }
  },
}
</script>