Vue.js 是一款流行的 JavaScript 框架，用于构建用户界面。在 Vue 应用中，组件之间的数据传递是常见的需求。我们将深入探讨 Vue 子组件向父组件传递数据的三种方式。

方式一：使用 Props 属性

Props 是 Vue 中用于从父组件向子组件传递数据的一种机制。通过在子组件中声明 Props，可以定义期望接收的属性，并通过父组件传递相应的值。

例子：

ParentComponent.vue:


<template>  <div>    <child-component :message="parentMessage"></child-component>  </div></template>
<script>import ChildComponent from './ChildComponent.vue';
export default {  components: {    ChildComponent  },  data() {    return {      parentMessage: 'Hello from parent!'    };  }}</script>

ChildComponent.vue:


<template>  <div>    <p>{{ message }}</p>  </div></template>
<script>export default {  props: {    message: String  }}</script>

代码解释：

在父组件中，使用 :message 将 parentMessage 传递给子组件的 message Prop。
在子组件中，通过 props 对象声明 message Prop，并在模板中使用它。

方式二：使用自定义事件

Vue 允许子组件通过自定义事件向父组件传递数据。子组件可以使用 $emit 方法触发一个自定义事件，并在触发时携带需要传递的数据。

例子：

ParentComponent.vue:


<template>  <div>    <child-component @child-event="handleChildEvent"></child-component>  </div></template>
<script>import ChildComponent from './ChildComponent.vue';
export default {  components: {    ChildComponent  },  methods: {    handleChildEvent(data) {      console.log('Received data from child:', data);    }  }}</script>

ChildComponent.vue:


<template>  <div>    <button @click="sendDataToParent">Send Data to Parent</button>  </div></template>
<script>export default {  methods: {    sendDataToParent() {      const data = 'Hello from child!';      // 使用 $emit 触发自定义事件，并携带数据      this.$emit('child-event', data);    }  }}</script>

代码解释：

父组件通过 @child-event 监听子组件触发的自定义事件。
子组件通过 this.$emit 触发自定义事件，并携带需要传递的数据。

方式三：使用 v-model

在Vue中，v-model 指令提供了一种便捷的方式，允许父组件通过双向绑定直接修改子组件的数据。为了使用 v-model，子组件需要声明一个名为 model 的选项，该选项包含两个属性：prop 和 event。

例子：

ParentComponent.vue:


<template>  <div>      <!-- 使用 v-model 将 parentMessage 绑定到 ChildComponent 的 message 属性 -->    <child-component v-model="parentMessage"></child-component>  </div></template>
<script>import ChildComponent from './ChildComponent.vue';
export default {  components: {    ChildComponent  },  data() {    return {          // 在父组件中声明一个数据 parentMessage      parentMessage: 'Hello from parent!'    };  }}</script>

在这里，v-model="parentMessage" 将 parentMessage 数据与 ChildComponent 的 message 属性进行了双向绑定。

ChildComponent.vue:


<template>  <div>      <!-- 使用 v-model 将 input 和 childMessage 进行双向绑定 -->    <input v-model="childMessage" />  </div></template>
<script>export default {  // 使用 model 选项声明父组件的 prop 名称和事件名
  model: {    prop: 'message',    event: 'input'  },      // 声明一个名为 message 的 prop，接收父组件传递的数据
  props: {    message: String  },  data() {    return {          // 在子组件中声明一个名为 childMessage 的数据，初始值为父组件传递过来的 message      childMessage: this.message    };  },  watch: {      // 监听 childMessage 数据的变化    childMessage(newValue) {      // 通过 $emit 触发 input 事件，更新父组件的数据      this.$emit('input', newValue);    }  }}</script>

代码解释：

在父组件中使用 v-model 将 parentMessage 绑定到子组件的 message。
子组件通过 model 选项声明 message Prop 和 childMessage 数据，并在 watch 中监听 childMessage 的变化，通过 $emit 触发 input 事件更新父组件的数据。

ITPub博客

Vue 父子组件传递数据的三种方式

方式一：使用 Props 属性

方式二：使用自定义事件

方式三：使用 v-model

最新文章