vue中:is的用法--传递一个组件

1.为什么要使用is
　　在vue的官网组件部分中，有明确的描述：当使用 DOM 作为模板时 (例如，使用 el 选项来把 Vue 实例挂载到一个已有内容的元素上)，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。尤其要注意，像 <ul>、<ol>、<table>、<select> 这样的元素里允许包含的元素有限制，而另一些像 <option> 这样的元素只能出现在某些特定元素的内部。通俗一点讲，就是“龙生龙，凤生凤，老鼠的儿子会打洞”，特殊的一下父元素如<ul>、<ol>、<table>、<select>里面不能包含不属于它的子元素，而与之相对应的<li>、<tr>、<option>只可以出现在特定的父元素里面。

教程里面是这么解释的：

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

父组件

<template>
  <div id="app" style="margin-top: 50px; border: 1px solid red">
    <h3>1普通组件</h3>
    <div style="border: 1px solid red">
      <component :is="componentCom"></component>
    </div>
    <div style="border: 1px solid blue">
      2 这是table中应用
      <el-table :data="tableData">
        <el-table-column :is="componentComTable"></el-table-column>
      </el-table>
    </div>
    <div style="border: 1px solid">
      3 这是ul-li 可以循环使用
      <ul>
        <li :is="componentComli"></li>
      </ul>
    </div>
  </div>
</template>
<script>
import test1 from "./test001.vue";
import test2 from "./test002.vue";
import test3 from "./test003.vue";
export default {
  name: "test",
  components: { test1, test2, test3 },
  data() {
    return {
      componentCom: "test1",
      componentComTable: "test2",
      componentComli: "test3",
      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 弄",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style scoped lang="scss"></style>
<style></style>

 2 子组件

test001

<template>
  <div class="content">我是子组件test001</div>
</template>
<script>
export default {
  name: "test1",

  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped lang="scss"></style>

test002

<template>
  <div class="content">
    <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>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped lang="scss"></style>

test003

<template>
  <div class="content">
    <div>test003</div>
    <div>这是li自定义</div>
  </div>
</template>
<script>
export default {
  name: "test003",
  props: {
    msg: String,
  },
  data() {
    return {};
  },
  methods: {},
  mounted() {},
};
</script>
<style scoped lang="scss"></style>

总结 

由于使用ul标签下只能识别li标签，所有添加的组件不能识别，因此要使用转义 :is
<ul>
    <component :is="componentA"></component>
</ul>
 
componentA 就是一个子组件
 
可以使用is 直接传递一个组件
也可以使用:is 查找父组件中的一个赋值，然后找到相应的组件(for循环)
————————————————