vue slot插槽
vue slot插槽vue slot插槽
我们前面讲过传值,今天讲的是可以直接传一个标签,通过slot插槽实现;
主要作用:
某一个区块,先占位,然后可以动态的搞个标签进去,方便切换该位置的内容,无需再搞多个页面;
原先的demo里,加个 Foot.vue;然后App.vue里动态的设置标签内容,来实现动态的替换;
要被替换的内容
export default {
name: 'Foot'
}
.foot{
padding: 20px;
}
这里的 要被替换的内容 就是定义了一个插槽;
以及取名f;
假如引入该组件的父组件没有给插槽设置内容,那默认就显示 ‘’要被替换的内容‘’;
如果设置了内容,那将被替换掉;
我们修改下App.vue;
版权所有:{{site}}
import PubSub from 'pubsub-js'
import Menu from './components/Menu' // 引入组件
import Foot from './components/Foot' // 引入组件
export default {
name: 'App',
components:{
Menu, // 映射组件标签
Foot
},
data(){
return {
site:'http://www.java1234.com',
menus:[
{
id:1,
name:'科技'
},
{
id:2,
name:'文化'
},
{
id:3,
name:'政治'
},
{
id:4,
name:'娱乐'
}
],
webSite:{
url:'http://www.java1234.com',
title:'Java知识分享网'
}
}
},
methods:{
addMenu(menu){
this.menus.push(menu)
}
},
mounted () {
// 绑定监听
// this.$refs.menu.$on('addMenu',this.addMenu);
// 订阅消息,参数一 消息名 参数二 处理的回调函数
PubSub.subscribe('add',(msg,data)=>{
this.addMenu(data);
})
}
}
这里:
版权所有:{{site}}
这里就指定了插槽内容;