常用的几种 Vue 父子组件传值方式

1. 父组件向子组件传值（props）

• 父组件代码：Parent.vue

  <template>
    <div>
      <h2>父组件</h2>
      <Child :parent-msg="parentMsg" />
    </div>
  </template>
  
  <script>
  import Child from './Child.vue';
  
  export default {
    components: {
      Child
    },
    data() {
      return {
        parentMsg: '这是父组件传递的消息'
      };
    }
  };
  </script>

• 子组件代码：Child.vue

  <template>
    <div>
      <h3>子组件</h3>
      <p>从父组件接收到的消息：{
      { parentMsg }}</p>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      parentMsg: {
        type: String,
        required: true
      }
    }
  };
  </script>

  2. 子组件向父组件传值（this.$emit）

• 子组件代码：Child.vue

  <template>
    <div>
      <h3>子组件</h3>
      <button @click="sendMessage">向父组件发送消息</button>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        childMsg: '这是子组件的消息'
      };
    },
    methods: {
      sendMessage() {
        this.$emit('sendMessage', this.childMsg);
      }
    }
  };
  <