vue3defineexpose defineemits

Vue3定义了一组新的组件选项defineExpose和defineEmits，用于支持更好的封装和类型安全。

defineExpose选项允许开发者在子组件中声明需要被父组件访问的实例属性，以便更好的封装子组件细节并提供更好的灵活性。例如，一个表单组件可以将用户输入的信息作为公共属性暴露给父组件，便于父组件进行下一步的业务处理。

在组件内部，我们可以对需要暴露给父组件的属性进行声明：

export default {
  setup() {
    const formData = reactive({
      name: '',
      age: 18,
    })

    function onSubmit() {
      // ...
    }

    // 定义需要暴露给父组件的属性
    defineExpose({
      formData,
      onSubmit,
    })

    return {
      formData,
      onSubmit,
    }
  },
  // ...
}

在父组件中，我们可以使用$refs来访问子组件实例属性：

<template>
  <Child ref="child" />

  <button @click="submit">提交</button>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const child = ref(null)

    function submit() {
      // 调用子组件实例方法
      child.value.onSubmit()
    }

    return {
      child,
      submit,
    }
  }
}
</script>

在这个例子中，我们通过在子组件中声明defineExpose选项，将formData和onSubmit暴露给了父组件。而在父组件中，则可以使用$refs来访问这些实例属性。

另外，Vue3还引入了defineEmits选项，用于声明父组件可以触发的自定义事件。这样可以让子组件、指令等更加清晰地定义各自支持的事件类型，避免事件名称冲突，提供更好的类型安全和代码提示。

我们可以在组件内声明需要触发的自定义事件：

export default {
  emits: ['update:modelValue', 'submit'],
  // ...
}

这里我们声明了两个自定义事件update:modelValue和submit，对应的事件处理函数名分别为onUpdateModelValue和onSubmit。在组件内部触发这些自定义事件时，可以直接调用这些处理函数并传入相应的参数：

function handleClick() {
  // 触发自定义事件
  emit('submit', formData)
}

function handleInput(event) {
  // 触发 update:modelValue 事件
  emit('update:modelValue', event.target.value)
}

在父组件中，我们可以通过v-on指令监听子组件触发的自定义事件：

<template>
  <Child v-on:submit="onSubmit" v-on:update:modelValue="onUpdateModelValue" />
</template>

<script>
export default {
  setup() {
    function onSubmit(formData) {
      // ...
    }

    function onUpdateModelValue(value) {
      // ...
    }

    return {
      onSubmit,
      onUpdateModelValue,
    }
  }
}
</script>

在这个例子中，我们在父组件中通过v-on指令监听子组件的两个自定义事件submit和update:modelValue，并在回调函数中处理这些事件。这样可以让事件传递更加清晰，减少事件名称冲突的可能性。

总之，Vue3的defineExpose和defineEmits选项为组件开发带来了更好的封装性和类型安全，有助于提高组件复用性和开发效率。