最佳替代品<slot />在<textarea><i>in [ Vue.js 3 ] component</div></i><b>在 [ Vue.js 3 ] 组件中</div></b></textarea><div id="text_translate"><p> 我想用 textarea 创建组件并在其中传递数据</p><pre><c-textarea> hello world </c-textarea></pre><p> 但是经典的<slot/>标签在 textarea 内部不起作用什么是最简单和最干净的选择</p><pre><template> <textarea><slot/></textarea> </template></pre><p> 在 Vue.js 3</p></div>

Question

I want create component with textarea and pass data inside that like

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

but the classic <slot/> tag not work inside of textarea what's simplest and cleanest alternative

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

in Vue.js 3

Answer 1

You should use value & input to bind the content instead of using slot

Here is the updated version of CTextarea component

<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>

check this woking demo

Answer 2

You can extract the content of a slot:

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

Basically, this builds the slot manually, which gives you a VNode element, where children contains the slot content.

I would really try to find another way though, this is coarse, error prone and most likely not what you want to do.

Personally, I would stick to the v-model approach.