【Vue】如何理解Vue组件中所说的is特性?

在vue.js组件教程的一开始提及到了is特性,对于这个不是很理解，希望有人能讲解下。
【Vue】如何理解Vue组件中所说的is特性?

【Vue】如何理解Vue组件中所说的is特性?

回答

意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样：

<ul>
    <li></li>
</ul>

而不能：

<ul>
    <your-component>
</ul>

这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：

<ul>
    <li is="your-component"></li>
</ul>

就是某些标签下只能使用指定的标签，否则无法被浏览器正确解析，例如ul、table、a、select这些。(例如ul一般跟着li，select一般跟着option这样)

<ul>
    <component-name></component-name>
</ul>

所以导致，上面的代码并不能被浏览器正确的解析，最终导致组件不能生效。

如果我们想要在这些标签ul、table、a、select下使用组件，想要他正确的被解析出来，就需要使用is属性。

is属性的值是组件名，例如在ul下使用一个组件，代码可以这样写：

//声明一个组件
new Vue({
    components:{
        'component-name':{
           template:'<p>你好，这是一个示例</p>' 
        }
    }
})
// ul下使用组件
<ul>
    <li is="component-name"></li>
</ul>

就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。
在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性：

<table>
  <tr is="my-row"></tr>
</table>

这两种写法表达的意思是一样的，但是第一种写法是不符合html语法验证的。

补充一下答案1:

组件的prop对象中的一种prop,用来判断组件是否定义能够被渲染(生成),这种情况存在于动态组件中.

component
Props:
is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean
Usage:
A “meta component” for rendering dynamic components. The actual component to render is determined by the is prop:

<!-- a dynamic component controlled by -->
<!-- the `componentId` property on the vm -->
<component :is="componentId"></component>
<!-- can also render registered component or component passed as prop -->
<component :is="$options.components.child"></component>

引用:https://vuejs.org/v2/api/#Bui...

以上是 【Vue】如何理解Vue组件中所说的is特性? 的全部内容， 来源链接： utcz.com/a/72576.html

回到顶部