Vue组件之is属性

发表于 | 分类于

学习内容

使组件成为原生 HTML 元素的形式，以is特性扩展

实例说明

DOM模板解析说明

当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。

实例

假设现在有一个自定义组件，为my-div，将它引用在<table>标签里：

1
2
3
4
5
<div id="app">
    <table>
        <my-div></my-div>
    </table>
</div>

1
2
3
Vue.component("my-div",{
        template:"<div>This is my div</div>"
    });

运行在浏览器后，正常显示，但是其实出现了问题，检查元素，结果如下：

image

显然自定义组件在<table>里被认为是无效内容，浏览器将它渲染在<table>之外了。像<table>这样的标签限制了其内部的元素类型，如果想引入自己的自定义组件，可以使用is属性：

1
2
3
<table>
    <tr is="my-div"></tr>
</table>

再来检查下元素：

image

这下嵌套正确了。