vue3中使用props和emits并指定其类型与默认值

下面是“Vue3中使用props和emits并指定其类型与默认值”的完整攻略。

1. Props

在 Vue3 中，props 属性的声明方式与 Vue2 有所不同，需要使用 defineProps 函数。

1.1 声明props属性

在组件中声明 props 属性，并指定类型和默认值，示例代码如下：

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    // 指定字符串类型和默认值
    title: {
      type: String,
      default: 'Hello World'
    },
    // 指定数字类型和默认值
    count: {
      type: Number,
      default: 0
    },
    // 指定布尔类型和默认值
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    // ...
  }
});

1.2 使用props属性

在 setup 函数中，可以通过 props 参数获取 props 属性的值，示例代码如下：

import { defineComponent, defineProps } from 'vue';

const MyComponent = defineComponent({
  props: {
    title: {
      type: String,
      default: 'Hello World'
    }
  },
  setup(props) {
    console.log(props.title); // 输出：Hello World
  }
});

2. Emits

在 Vue3 中，emits 属性的声明方式与 Vue2 有所不同，需要使用 defineEmits 函数。

2.1 声明emits属性

在组件中声明 emits 属性，并指定事件名，示例代码如下：

import { defineComponent, defineEmits } from 'vue';

const MyComponent = defineComponent({
  emits: ['update'],
  setup(props, { emit }) {
    // ...
  }
});

2.2 触发emits事件

在 setup 函数中，通过 emit 函数触发 emits 事件，示例代码如下：

import { defineComponent, defineEmits } from 'vue';

const MyComponent = defineComponent({
  emits: ['update'],
  setup(props, { emit }) {
    function handleClick() {
      emit('update', true);
    }
  }
});

以上就是“Vue3中使用props和emits并指定其类型与默认值”的完整攻略。