VUE3自定义组件实现高效子父传值

前端

2024-02-09 15:11:01

踏入VUE3自定义组件的世界

自定义组件是VUE3中模块化和代码重用的核心概念。它们允许开发者封装可重用代码块，并在应用程序的不同部分轻松使用。创建自定义组件包括定义其模板、样式和行为逻辑。

子父传值：数据的桥梁

在自定义组件中，一个常见需求是子组件与父组件之间的数据交互。VUE3提供了强大的Props和Emit机制，使这种交互变得轻而易举。

Props：从父到子的单向数据流

Props是子组件从父组件接收数据的属性。它们在子组件的定义中声明，并可以像普通数据属性一样在模板中使用。Props提供了从父级到子级的数据单向流动，确保子组件只能接收数据，而不能修改父组件中的数据。

Emit：从子到父的事件触发

Emit用于子组件向父组件发送事件或数据。它允许子组件触发父组件中的方法或更新父组件中的数据。子组件通过this.$emit方法触发Emit事件，并传递事件名称和任何相关数据。父组件可以通过监听子组件的事件来响应这些事件。

构建可复用的子父传值组件

为了展示自定义组件的强大功能，我们创建一个简单的"HelloWorld"组件，它演示了从父组件到子组件的数据传值。

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  props: ['message'],
  emits: ['updateMessage']
};
</script>

在父组件中，我们可以使用这个"HelloWorld"组件并传入一个消息：

<template>
  <div>
    <HelloWorld :message="message" @updateMessage="updateMessage" />
    <button @click="changeMessage">更改消息</button>
  </div>
</template>

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

export default {
  components: { HelloWorld },
  data() {
    return {
      message: '你好，世界！'
    };
  },
  methods: {
    changeMessage() {
      this.message = '欢迎来到VUE3！';
      this.$refs.helloWorld.updateMessage(this.message);
    }
  }
};
</script>