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>
扫描二维码关注公众号,回复:
14551791 查看本文章
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循环)
————————————————