具有Web组件"is“属性的Vue

Question

我正在尝试使用一个使用"is“属性标签扩展现有元素的web组件，但vue接受该属性并将其转换为自定义元素。

我需要vue来识别v-model和业务逻辑，但我也需要vue不将其更改为自定义组件。

Vue实现了这一点：

<textarea v-model="text" is="my-component"></textarea>

进入：

<my-component></my-component>

我尝试过设置"v-pre“，但这会阻止vue跟踪v-model。我也尝试过设置ignoredElements，但vue仍然转换为自定义元素。我看了看https://github.com/vuejs/vue/issues/2642，这似乎应该是一个固定的问题，但也许我遗漏了什么。

下面是正在发生的事情的一个最小示例：https://jsfiddle.net/ntkg1xeq/1/

请注意，在本例中，textarea变成了real-set。

我期望vue会忽略"is“属性，如果它不匹配任何已注册的组件，并且不会重写元素，从而阻止web组件工作。

有没有办法像这样一起使用vue和web组件？

Answer 1

根据Web component with "is" attribute not rendered in the view.的上一条评论，<textarea v-pre v-model="text" is="my-component"></textarea>将按照您的期望呈现给<textarea is="my-component">。然而，这个问题似乎只是修复了Vue 1.x ( Vue 1.0.12 example code )，而不是Vue 2.x ( your example code )。

所以。如果你想在textarea中设置is属性并让v-model在Vue 2.x中工作，我认为$refs是另一个解决方案( Vue 2.x example code by using $refs )。