[Vue.js 3]组件中<slot/>中<textarea>的最佳替代品

Question

我想创建带有文本区域的组件并在其中传递数据，就像

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

但是经典的

<slot/>

标签在文本区域内不起作用 什么是最简单和最干净的替代方案

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

在 Vue.js 3 中

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>

检查这个woking 演示

Answer 2

您可以提取插槽的内容：

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

基本上，这会手动构建插槽，从而为您提供一个 VNode 元素，其中

children

包含插槽内容。

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

就我个人而言，我会坚持

v-model

方法。

Answer 3

在脚本设置和 Vue ^3.3 版本中，您可以用非常短的方式完成它：

<script setup>
   const modelValue = defineModel();
</script>

<template>
 <textarea v-model="modelValue"/>
</template>