Vue3 手把手教你自定义组件——setup版

前言

Vue3 中的 setup 是一个语法糖，它允许你使用函数来代替选项对象来定义组件。这使得组件的定义更加简洁和易读，同时也不失灵活性。

定义一个自定义组件

要定义一个自定义组件，你需要使用 Vue.defineComponent() 函数。该函数接收一个对象作为参数，该对象包含组件的定义。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  }
});

在 setup 函数中，你可以使用 Vue3 的响应式 API 来定义组件的状态和行为。例如，你可以使用 ref() 函数来定义一个响应式变量，或者使用 watch() 函数来监听一个响应式变量的变化。

使用 props

props 是组件用来接收父组件数据的属性。要使用 props，你需要在组件的定义对象中定义一个 props 选项。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  },
  props: {
    message: {
      type: String,
      required: true
    }
  }
});

在父组件中，你可以通过使用 v-bind 指令来将数据传递给子组件。

<MyComponent v-bind:message="myMessage"></MyComponent>

使用 events

events 是组件用来向父组件发送数据的属性。要使用 events，你需要在组件的定义对象中定义一个 events 选项。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  },
  events: {
    'update-message'() {
      // 当组件发出 'update-message' 事件时触发的回调函数
    }
  }
});

在子组件中，你可以通过使用 $emit() 方法来触发事件。

this.$emit('update-message');

在父组件中，你可以通过使用 v-on 指令来监听子组件发出的事件。

<MyComponent v-on:'update-message'="handleUpdateMessage"></MyComponent>

使用 slots

slots 是组件用来包含父组件内容的区域。要使用 slots，你需要在组件的定义对象中定义一个 slots 选项。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  },
  slots: {
    default: () => {
      // 默认插槽的渲染函数
    }
  }
});

在父组件中，你可以通过使用 slot 标签来将内容传递给子组件。

<MyComponent>
  <template slot="default">
    <h1>Hello World</h1>
  </template>
</MyComponent>

使用 expose

expose 可以让子组件将数据或方法暴露给父组件。要使用 expose，你需要在组件的定义对象中定义一个 expose 选项。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  },
  expose: {
    message: () => {
      return this.message;
    }
  }
});

在父组件中，你可以通过使用 ref 指令来访问子组件暴露的数据或方法。

<MyComponent ref="myComponent"></MyComponent>

console.log(this.$refs.myComponent.message());

使用 v-model

v-model 是 Vue3 中的一个语法糖，它可以简化表单元素的绑定。要使用 v-model，你需要在组件的定义对象中定义一个 model 选项。

const MyComponent = Vue.defineComponent({
  setup() {
    // 组件的逻辑
  },
  model: {
    prop: 'message',
    event: 'update-message'
  }
});

在父组件中，你可以通过使用 v-model 指令来将表单元素与子组件绑定。

<MyComponent v-model="myMessage"></MyComponent>

总结

Vue3 的 setup 语法糖使自定义组件的定义更加简洁和易读。通过使用 props、events、slots、expose 和 v-model 等特性，你可以构建功能强大且可重用的组件。