父子组件之间的数据传递

父组件：parents.vue

  <div style="background:purple;">
    <div style="color: white">(父组件){{'这是：'+psonMsg}}</div>
    <child :message="parentMsg" @sonMsg='showChildMsg'></child>
  </div>
</template>

<script>

  import child from './child '  //引入child组件
  export default {
    data() {
      return {
        parentMsg: '父组件的value',
        psonMsg: ''
      }
    },
    components: {
      child
    },
    methods: {
      showChildMsg(value) {
        this.psonMsg = value;
        console.log('value', value)
      }
    }
  }
</script>
<style>
</style>

子组件：child.vue

<template>
  <div style="background:pink;">
    <div>(子组件){{'这是：'+message}}</div>
    <button @click="enter">子传父</button>
  </div>
</template>
<script>
  export default {
    props: {
      message: String
    },
    data() {
      return {
        sonMsg: '子组件的value'
      }
    },
    methods: {
      enter() {
        this.$emit("sonMsg", this.sonMsg)
      }
    }
  }
</script>
<style>
</style>