vue2[初级] solt插槽使用

回顾上节

– 上节内容 通过PubSub组件实现 组件的订阅与发布
– 父组件中订阅 通过PubSub.subcribe(‘pubName’,(msg,data)=>{…})
– 子组件中发布 通过PubSub.publish(‘pubName’,valueObject);

本节内容

• 前面都是传递至或传递方法到子组件中，solt则是传递标签到子组件中
• 主要作用 实现局部刷新
  – 子组件中的某个区域先占位置 然后动态搞个标签进去 方便切换该位置的内容 无需在做多个页面

实现方式

– 新增一个组件 Foot.vue
– Foot.vue的template中添加slot插槽

// sName 是slot的名称 用来区分不同的slot插槽
// 插槽可以设置默认内容 如果父组件传递slot过来则会被替换 不传递则使用默认内容
<slot name="sName">默认插槽内容</slot>

– 父组件中引入Foot组件
– import Foot from ‘./components/Foot’
– 引入之后就可以映射Foot标签了 映射Foot标签后可以使用Foot标签了

// 使用Foot标签
<Foot>
    <div slot="sName">
      版权信息 ：{
  { side }}
    </div>
  </Foot>
  // 引入Foot组件
<script>
import Foot from './components/Foot'
export default {
// 映射标签
components:{
Menu22