Vue中的is用法总结

Vue官方文档,是一个值得反复去浏览研究的,今天在翻文档的时候,发现了动态组件,里面有一个属性是is。看了一下文档,上面说了is的两个作用!

动态切换不同的组件

官方文档给的是一个页签切换的demo,页签里面应该是不同的组件。

Vue中的is用法总结

这里,我按照官方的demo,来写一个。

<template>
  <div>
    <div class="tab-header">
      <button @click="tabChange('Home')">Home</button>
      <button @click="tabChange('Posts')">Posts</button>
      <button @click="tabChange('Archive')">Archive</button>
    </div>
    <div class="tab-body" :is="active"></div>
  </div>
</template>
<script>
import Home from './views/Home.vue';
import Posts from './views/Posts.vue';
import Archive from './views/Archive.vue';
export default {
  //引入组件
  props: [],
  //引入混淆
  mixins: [],
  //import引入的组件需要注入到对象中才能使用
  components: {
    Home,
    Posts,
    Archive
  },
  data() {
    //这里存放数据
    return {
      active: 'Home'
    };
  },
  //方法集合
  methods: {
    tabChange(id){
      this.active = id
    }
  }
};
</script>

解析 DOM 模板

总所周知,有些 HTML 元素,诸如 <ul><ol><table><select>,对于哪些元素可以出现在其内部是有严格限制的。而有些元素,诸如 <li><tr><option>,只能出现在其它某些特定的元素内部。

<ul>
  <my-component></my-component>
  <my-component></my-component>
</ul>

my-component是我们自己写的组件,但是html在渲染dom的时候,my-componentul来说并不是有效的dom,会被作为无效的内容提升到外部,并导致最终渲染结果出错。正是因为html模板的限制,于是也可以使用is来做一个变通。

<ul>
  <li is='my-component'></li>
</ul>

添加新评论