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 元素，例如
- 、
和 对哪些元素可以出现在其中有限制，一些元素如和<;option> 只能出现在某些其他元素中.在这些情况下，is 属性可能不会(仅)用于在动态组件之间切换，而是为了遵守 HTML 限制(以避免浏览器对我们的自定义组件做出意外行为)同时仍会在稍后由我们的自定义组件替换它们.
这是一个带有的快速演示:Vue.component('my-row', {模板:'#我的行'，});新的 Vue({el: '#app',});
td,第 {边框:1px纯黑色；}
<script src="https://unpkg.com/vue"></script><div id="应用程序"><table id="table1"><tr>＜第＞表＜/第＞;<td>1</td></tr><!-- 下面的自定义组件将从表格中剥离出来.确切结果可能因浏览器而异 --><我的行></我的行>
<小时/><table id="table2"><tr>＜第＞表＜/第＞;<td>2</td></tr><!-- 有效的 TR 行将被自定义组件正确替换 --><tr is="my-row"></tr>
<模板 id="我的行"><tr><th>标题</th><td>细胞</td></tr></template>
结果:
- 在 Firefox 中，
代码>.
- 在 Chrome 中也是如此.
When using dynamic component in vue, we could use
componentor html tag such asdivas 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 usingisattribute 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
isattribute 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天全站免登陆