前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >谈Vue组件的is特性

谈Vue组件的is特性

作者头像
小丑同学
发布2020-09-21 15:18:57
6780
发布2020-09-21 15:18:57
举报
文章被收录于专栏:小丑的小屋

前言

大家好,我是你们的小编,今天我们的话题是谈Vue组件的is特性,组件是Vue的中强大的功能之一,组件可以扩展HTMl,进行封装提高复用性,增加了开发效率,因此,Vue为此添加了特殊的功能is,那么is的特性在哪里呢有什么用途呢?

限制元素

其实简单的说,vue模板也是dom模板,在浏览器解析的过程中,也是通过原生浏览器解析dom,那么这样由于对dom的限制进而对vue模板也产生了限制,导致vue的组件中有一些标签是不能放置的,比如ul,select,a,table,dl等等这些标签中,所以需要增添is特性来扩展,从而达到可以在这些受限制的html中使用:

代码语言:javascript
复制
<ul>
   <li is="my-component"></li>
</ul>

而不能使用下面这样形式的写法,导致Vue将自定义组件视为无效内容,渲染出错:

代码语言:javascript
复制
<ul>
   <my-component></my-component>
</ul>

温馨提示

如果使用下面模板的话,这个限制是不存在的

代码语言:javascript
复制
字符串 (例如:template: '...')
单文件组件 (.vue)
<script type="text/x-template">

动态组件

在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中<component>用:is来挂载不同的组件。

代码语言:javascript
复制
<template>
  <ul>
    <button @click="components = 'myComponent'">my</button>
    <button @click="components = 'youComponent'">you</button>
    <button @click="components = 'otherComponent'">other</button>
    <component :is="components"></component>
  </ul>
</template>
<script>
import myComponent from "./components/mycomponent";
import youComponent from "./components/youcomponent";
import otherComponent from "./components/othercomponent";
export default {
  data() {
    return {
      components: "myComponent"
    };
  },
  components: {
    myComponent,
    youComponent,
    otherComponent
  }
};
</script>

我们在components中注册了三个模板,当我们点击当前按钮的时候,就会将模板切换模板,可以说是非常方便了。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小丑的小屋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
    • 限制元素
      • 动态组件
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档