我想创建一个有文本区域的组件，并在其中传递数据
<c-textarea> hello world </c-textarea>
但是经典的<slot/>标记在textarea中不起作用，这是最简单和最干净的替代方法
<slot/>
<template> <textarea><slot/></textarea> </template>
版本js 3
w8f9ii691#
应使用value和input绑定内容，而不是使用slot以下是CTextarea组件的更新版本
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 demo
hfyxw5xn2#
您可以提取插槽的内容：
<template> <textarea>{{ $slots.default ? $slots.default()[0].children : ''}}</textarea> </template>
基本上，这是手动构建插槽，它为您提供了一个VNode元素，其中children包含插槽内容。我真的会尝试找到另一种方法，虽然，这是粗糙的，容易出错，最有可能不是你想做的。就我个人而言，我会坚持使用v-model方法。
children
v-model
2条答案
按热度按时间w8f9ii691#
应使用
value和input绑定内容，而不是使用slot以下是
CTextarea组件的更新版本检查此woking demo
hfyxw5xn2#
您可以提取插槽的内容：
基本上，这是手动构建插槽，它为您提供了一个VNode元素，其中
children包含插槽内容。我真的会尝试找到另一种方法，虽然，这是粗糙的，容易出错，最有可能不是你想做的。
就我个人而言，我会坚持使用
v-model方法。