Vue：:is特性详解和示例

今天在阅读Vue教程的时候，读到“解析DOM模板时的注意事项”这一节，看到:is特性——就是有些元素内部不能使用自定义标签或者自定义标签内也不能放某些特殊的标签，这时候就要用is代替一下，让html语法符合规则验证。is属于指定要在内部使用的标签。

文档链接：https://cn.vuejs.org/v2/guide/components.html
教程里面是这么解释的：

看完之后能感觉到就是想要把blog-post-row的内容放在table中的tr标签中，是通过:is特性来进行使用的。但是感觉不知道具体怎么用，那就下面的这个示例再直观的感受一下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
 
    <div id="app1">
      <el-table :data="tableData">
        <el-table-column is="blog_post_row"></el-table-column>
      </el-table>
    </div>
 
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {},
  components: {
    blog_post_row: {
      template: `
      <div>
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址" width="180"></el-table-column>
      </div>
      `
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

也可以看一下其他朋友的示例呀：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
 
    <div id="app1">
      <button @click="toshow">点击让子组件显示</button>
      <component :is="which_to_show"></component>
    </div>
 
  </div>
</template>
 
<script>
import Vue from 'vue'
/* eslint-disable no-new */
 
export default {
  name: 'HelloWorld',
  data () {
    return {
      which_to_show: 'first',
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    toshow: function () {
      var arr = ['first', 'second', 'third', '']
      var index = arr.indexOf(this.which_to_show)
      if (index < 3) {
        this.which_to_show = arr[index + 1]
      } else {
        this.which_to_show = arr[0]
      }
    }
  },
  components: {
    first: {
      template: `<div>这里是子组件</div>`
    },
    second: {
      template: `<div>这里是子组件2</div>`
    },
    third: {
      template: `<div>这里是子组件3</div>`
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>