如何构建一个将内部状态反映为属性的 Vue Web 组件？

Question

我正在使用 Vue 3 构建一个 Web 组件输入，如下所示：

<my-input value="Search"></my-input>

如何确保

value

属性始终等于当前内部值？

Answer 1

Vue 3 并不是真正考虑到 Web 组件。使用

defineModel()

时，所有 Vue 内部 API（如

defineExpose()

、

defineEmits()

或

defineCustomElement()

）将无法正确翻译。

但是，您可以使用自定义逻辑来解决此问题：

<script setup lang="ts">
import { ref, watch, computed } from 'vue';

const props = defineProps<{
  value?: string;
}>();

const $search = ref();
const instance = computed(() => ($input.value?.getRootNode() as ShadowRoot)?.host);

const query = ref(props.value ?? '');
watch(query, () => instance.value.setAttribute('value', query.value));
</script>

<template>
  <input v-model.trim="query" ref="$input">
</template>