Vue 渲染器将组件视为静态组件，因此在将它们放入 DOM 后，它们根本不会改变(这就是为什么如果您检查 DOM，您会在.

但即使他们真的改变了，那也无济于事。只是因为s 中的HTML 元素不会成为它们的值。您必须设置TextArea 元素的value属性才能使其工作。

总之，不要绝望。这是可行的，解决上述问题所需的一切就是使用一个小的辅助组件。

有许多可能的方法来实现这一点，下面显示了两种。它们的主要区别在于您希望原始组件的模板如何。

解决方案：改成组件

您的组件模板现在将变为：

如您所见，除了替换为已更改之外别无他物。这足以克服 Vue 给. 的完整实现在下面的演示中。

替代解决方案：保留但通过组件获取的 HTML

解决方案是创建一个辅助组件(vnode-to-html如下所述)，将插槽的VNode转换为 HTML 字符串。然后，您可以设定HTML字符串作为value你的。您的组件模板现在将变为：

在这两种选择中...

的用法my-component保持不变：

hello world

完整的工作演示：

Vue.component('my-component', {

props: ["content", "name", "id"],

template: `

`,

data() { return {valueForMyTextArea: '', myContent: null} }

});

Vue.component('textarea-slot', {

props: ["value", "name", "id"],

render: function(createElement) {

return createElement("textarea",

{attrs: {id: this.$props.id, name: this.$props.name}, on: {...this.$listeners, input: (e) => this.$emit('input', e.target.value)}, domProps: {"value": this.$props.value}},

[createElement("template", {ref: "slotHtmlRef"}, this.$slots.default)]

);

},

data() { return {defaultSlotHtml: null} },

mounted() {

this.$emit('input', [...this.$refs.slotHtmlRef.childNodes].map(n => n.outerHTML).join('\n'))

}

});

Vue.component('vnode-to-html', {

props: ['vnode'],

render(createElement) {

return createElement("template", [this.vnode]);

},

mounted() {

this.$emit('html', [...this.$el.childNodes].map(n => n.outerHTML).join('\n'));

}

});

new Vue({

el: '#app'

})

分解：Vue 将s解析为VNodes 并使它们在this.$slots.SLOTNAME属性中可用。默认插槽自然进入this.$slots.default.

因此，在运行时，您可以使用已传递的内容(如 中的 VNode this.$slots.default)。现在的挑战变成了如何将这些 VNode 转换为 HTML 字符串？这是一个复杂的、仍然悬而未决的问题，将来可能会得到不同的解决方案，但是，即使有，也很可能需要一段时间。

上面 (template-slot和vnode-to-html)两种解决方案都使用 Vue 的 render 函数将 VNode 渲染到 DOM，然后获取渲染的 HTML。

由于提供的插槽可能具有任意的 HTML，我们将 VNode 渲染为一个HTML 模板元素，它不执行任何标签。

两种解决方案之间的区别在于它们如何“处理”从渲染函数生成的 HTML。在vnode-to-html返回作为应该由父(被拾起的事件my-component)，其使用所传递的值来设置data将被设置为属性:value的textarea。

该textarea-slot声明本身，父不就得了。这是一个更简洁的解决方案，但需要更加小心，因为您必须指定要向下传递到created inside 的属性textarea-slot。

总结和现成的替代品

不管怎样，重要的是要知道 Vue 在将声明的内容解析为s 时，会去除一些格式信息，例如顶级组件之间的空格。同样，它会去除标签(因为它们不安全)。这些是使用s 的任何解决方案所固有的警告(此处是否提供)。所以要注意。

典型的 Vue 富文本编辑器通过使用v-model(或value)属性将代码传递到组件中来完全解决这个问题。

众所周知的例子包括：

他们的网站上都有很好的文档(上面链接)，所以我在这里重复它们没什么用，但作为一个例子，看看 codemirror 如何使用valueprop 来传递代码：

:value="code"

:options="cmOptions"

@ready="onCmReady"

@focus="onCmFocus"

@input="onCmCodeChange">

所以他们就是这样做的。当然，如果s - 及其警告 - 适合您的用例，它们也可以使用。