in in [ Vue.js 3 ] 组件的最佳<slot/>替代方案<textarea>

Question

我想创建一个带有textarea的组件，并在其中传递数据，比如

<c-textarea> hello world </c-textarea>

，但经典的<slot/>标签不能在文本区域内工作最简单、最干净的替代方法是什么

<template>
<textarea><slot/></textarea>
</template>

Answer 1

您应该使用value&input代替slot绑定内容

以下是CTextarea组件的更新版本

<template>
<textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</textarea>
</template>
<script>
export default {
name: 'CTextarea',
emits: ['update:modelValue'],
props: {
modelValue: String,
},
};
</script>

查看此工作演示

Answer 2

您可以提取槽的内容:

<template>
<textarea>{{ $slots.default ? $slots.default()[0].children : ''}}</textarea>
</template>

基本上，这是手动构建插槽，它给您一个VNode元素，其中children包含插槽内容。

我真的想找到另一种方法，但这是粗糙的，容易出错的，很可能不是你想要做的。

就个人而言，我会坚持v-model方法。