java slot_vue slot插槽

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}}

这里就指定了插槽内容；