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

Vue
94
0
0
2024-02-14
标签   Vue组件
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>

代码解释:

  • 在父组件中,使用 :messageparentMessage 传递给子组件的 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 的选项,该选项包含两个属性:propevent

例子:

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 数据与 ChildComponentmessage 属性进行了双向绑定。

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-modelparentMessage 绑定到子组件的 message
  • 子组件通过 model 选项声明 message Prop 和 childMessage 数据,并在 watch 中监听 childMessage 的变化,通过 $emit 触发 input 事件更新父组件的数据。