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 事件更新父组件的数据。