vue 完整父子组件传值

在 Vue 中，父组件向子组件传递数据可以使用 props，子组件向父组件传递数据可以使用自定义事件。下面是一个完整的父子组件传值的示例：

<template>
  <div>
    <h1>父组件</h1>
    <p>子组件传递的消息：{{message}}</p>
    <Child :message="message" @updateMessage="updateMessage"></Child>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

在父组件中，定义了一个名为 `message` 的数据属性，并将它作为 props 传递给子组件 `Child`。子组件中通过 `props` 接收父组件传递的 `message` 属性，并在子组件中使用。同时，子组件中定义了一个名为 `updateMessage` 的自定义事件，并通过 `$emit` 方法触发该事件，将子组件中修改后的 `message` 值传递给父组件。在父组件中定义了名为 `updateMessage` 的方法，用于接收子组件传递的 `message` 值，并更新父组件中的 `message` 数据。

子组件代码如下：

<template>
  <div>
    <h2>子组件</h2>
    <input v-model="newMessage" @keyup.enter="updateMessage">
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      newMessage: ''
    }
  },
  methods: {
    updateMessage() {
      this.$emit('updateMessage', this.newMessage);
      this.newMessage = '';
    }
  }
}
</script>

在子组件中，定义了一个名为 `newMessage` 的数据属性，并使用 `v-model` 绑定了一个输入框。同时，通过 `props` 接收父组件传递的 `message` 属性，并在子组件中显示。在输入框中输入新的消息后，通过 `@keyup.enter` 监听回车键并触发 `updateMessage` 方法，该方法通过 `$emit` 方法触发了自定义事件 `updateMessage` 并将新的消息值传递给父组件。最后，将输入框的值清空以便下一次输入。