vue.js:<component :is="comp-name"/> 之间有什么区别?和<div:is="comp-name"/> [英] vue.js: what's the difference between <component :is="comp-name"/> and <div :is="comp-name"/>?
问题描述
在vue中使用动态组件时,我们可以使用component
或者div
等html标签作为标签名:
或:
//假设comp-name的根标签是div<div :is="comp-name"></div>
那么这两种方式有什么区别呢?一样吗?
is
" 属性不是特定于 Vue 的,它来自自定义元素规范.
但显然 Vue 必须自己实现它以进行编译,模仿自定义元素规范.
在您展示的示例中,我想这无关紧要,因为在这两种情况下,标记(
或
is
属性在几个可能的组件(动态组件")之间切换的典型情况.然而,当您尝试在一些限制它们可以拥有的子元素类型的 HTML 元素中使用自定义元素/Vue 组件(带有运行时编译)时,它开始变得重要,如 DOM 模板解析注意事项 Vue 指南部分:
<块引用>一些 HTML 元素,例如
、
- 、
和
<模板 id="我的行"><tr><th>标题</th><td>细胞</td></tr></template>
结果:
- 在 Firefox 中,
标签呈现在 外部 和 上方代码>.
- 在 Chrome 中也是如此.
When using dynamic component in vue, we could use
component
or html tag such asdiv
as the tag name:<component :is="comp-name"></component>
or:
// assume that the root tag of comp-name is div <div :is="comp-name"></div>
So what's the difference between the 2 ways? Are the same?
解决方案The "
is
" attribute is not Vue specific, it comes from the Custom Element spec.See also What is HTML "is" attribute?
But obviously Vue has to implement it on its own for its compilation, mimicking the Custom Element spec.
In the example you show, I guess it will not matter, as in both cases the tag (
<component>
or<div>
) will be replaced by the Vue component instance. This is the typical situation of usingis
attribute to switch between several possible components ("dynamic components").However it starts to matter when you try to use Custom Elements / Vue components (with runtime compilation) in some HTML elements that restrict the type of child elements they can have, as explained in the DOM Template Parsing Caveats section of Vue guide:
Some HTML elements, such as
<ul>
,<ol>
,<table>
and<select>
have restrictions on what elements can appear inside them, and some elements such as<li>
,<tr>
, and<option>
can only appear inside certain other elements.In these cases, the
is
attribute may not be (only) used to switch between dynamic components, but to comply with HTML restrictions (in order to avoid the browser behaving unexpectedly to our custom components) while still replacing them later on by our custom components.Here is a quick demonstration with a
<table>
:Vue.component('my-row', { template: '#my-row', }); new Vue({ el: '#app', });
td, th { border: 1px solid black; }
<script src="https://unpkg.com/vue"></script> <div id="app"> <table id="table1"> <tr> <th>Table</th> <td>1</td> </tr> <!-- Below Custom component will be stripped out of the table. Exact result may differ depending on browsers --> <my-row></my-row> </table> <hr /> <table id="table2"> <tr> <th>Table</th> <td>2</td> </tr> <!-- Valid TR row will be correctly replaced by Custom component --> <tr is="my-row"></tr> </table> </div> <template id="my-row"> <tr> <th>Header</th> <td>Cell</td> </tr> </template>
Result:
- in Firefox, the
<my-row>
tag is rendered outside and above the<table>
. - same in Chrome.
这篇关于vue.js:<component :is="comp-name"/> 之间有什么区别?和<div:is="comp-name"/>的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文登录 关闭
扫码关注1秒登录发送“验证码”获取 | 15天全站免登陆