插槽
<body>
<div id="app">
<my-com>
<!-- 默认组件标签中的内容不会渲染显示 -->
<!-- 没有使用插槽,并不会显示 -->
<!-- 如果在子组件模板中添加 slot插槽,就可显示组件标签中间的内容 -->
插入slot插槽之后
</my-com>
<my-com>
<!-- 通过slot插槽可以直接将父组件的数据渲染到子组件标签,不用props传值 -->
<!-- 但是子组件不能修改 -->
{{people.name}}
</my-com>
</div>
</body>
<script type="text/html" id="my-tem">
<div>
<slot></slot>
<p>这是一个子组件</p>
<slot></slot>
</div>
</script>
<script>
Vue.component('my-com', {
template: '#my-tem',
props: [],
computed: {
},
data() {
return {
}
}
})
var app = new Vue({
el: "#app",
data: {
people:{
"name":"张三"
}
}
})
</script>
总结:
<!-- 1.slot插槽可以把父组件的数据,不传值,直接渲染到子组件模板,但仅限显示不能修改 -->
<!-- 2.slot插槽标签只能写在子组件模板中 -->
<!-- 3.子组件中用了几个插槽,就会将组件之间的内容,显示几遍 -->
<!-- slot插槽在一个组件中默认只能写一个,可能会报错 -->
<!-- 4.slot标签只是一个插槽,他中间的信息不会被渲染 -->
具名插槽
<body>
<div id="app">
<my-com>
<span slot="myName">{{people.name}}</span>
<span slot="myAge">{{people.age}}</span>
</my-com>
<my-com>
<!-- 通过slot插槽可以直接将父组件的数据渲染到子组件标签,不用props传值 -->
<!-- 但是子组件不能修改 -->
<span slot="myName">{{people.name}}</span>
<span slot="myAge">{{people.age}}</span>
<span slot="sex">女</span>
</my-com>
</div>
</body>
<script type="text/html" id="my-tem">
<div>
<p>这是一个子组件</p>
姓名:<slot name="myName"></slot>
年龄:<slot name="myAge"></slot>
电话:<slot name="tel">110</slot>
性别:<slot name="sex">男</slot>
</div>
</script>
<script>
Vue.component('my-com', {
template: '#my-tem',
props: [],
computed: {
},
data() {
return {
}
}
})
var app = new Vue({
el: "#app",
data: {
people:{
name:"张三",
age:20
}
}
})
</script>
总结:
<!-- 1.具名插槽 将子组件标签中的内容,一一对应,分发给对应的插槽显示 -->
<!-- 2.子组件标签中内容的属性slot值对应模板中slot标签的name值 -->
<!-- 3.具名插槽可以有多个互不干涉 -->
<!-- 4.具名插槽标签内部可以有东西,当作默认值渲染,如果插槽绑定了数据,默认值会被替换掉 -->
动态组件
<div id="app">
<!-- 之前通过选项卡的方式 控制v-show来进行切换 -->
<!-- <ul>
<li @click="current = 'my-com1'">1</li>
<li @click="current = 'my-com2'">2</li>
<li @click="current = 'my-com3'">3</li>
</ul>
<my-com1 v-show="current == 'my-com1'"></my-com1>
<my-com2 v-show="current == 'my-com2'"></my-com2>
<my-com3 v-show="current == 'my-com3'"></my-com3> -->
<!-- 因为有多个组件 切换只是显示与隐藏 切换之后 数据还在 -->
<!-- 使用动态组件 -->
<!-- 只写一个 使用component组件标签来代替以上三个组件 -->
<!-- vue里面提供的通用组件 -->
<ul>
<li @click="current = 'my-com1'">1</li>
<li @click="current = 'my-com2'">2</li>
<li @click="current = 'my-com3'">3</li>
</ul>
<!-- 动态组件切换 切换之后 组件其实是销毁与重建 所以里面的数据会被销毁 -->
<component :is="current"></component>
<!-- 但是我就是不想数据被销毁 想要保留 -->
<!-- vue提供了内置组件 可以把组建中的数据临时进行缓存组件切换时优先显示缓存数据 -->
<keep-alive>
<component :is="current"></component>
</keep-alive>
</div>
</body>
<script type="text/html" id="my-tem1">
<div>
<p>第一页</p>
<input type="text">
</div>
</script>
<script type="text/html" id="my-tem2">
<div>
<p>第二页</p>
<input type="text">
</div>
</script>
<script type="text/html" id="my-tem3">
<div>
<p>第三页</p>
<input type="text">
</div>
</script>
<script>
Vue.component('my-com1', {
template: '#my-tem1',
props: [],
computed: {
},
data() {
return {
}
}
})
Vue.component('my-com2', {
template: '#my-tem2',
props: [],
computed: {
},
data() {
return {
}
}
})
Vue.component('my-com3', {
template: '#my-tem3',
props: [],
computed: {
},
data() {
return {
}
}
})
var app = new Vue({
el: "#app",
data: {
current:"my-com1"
}
})
</script>
