1、使用slot分发内容

1.1、什么是slot(插槽)

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发.Vue.js 实现了一个内容分发 API，使用特殊的 ‘slot’ 元素作为原始内容的插槽。

1.2、编译的作用域

在深入内容分发 API 之前，我们先明确内容在哪个作用域里编译。

应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。

组件作用域简单地说是：

父组件模板的内容在父组件作用域内编译；

子组件模板的内容在子组件作用域内编译。

1.3、插槽的用法

父组件的内容与子组件相混合，从而弥补了视图的不足

混合父组件的内容与子组件自己的模板 单个插槽：

<app2>
        <p>我是父组件</p>
</app2>

Vue.component('app2',{
         template:'<div>\
           <slot>如果父组件没有内容，我将默认插入</slot>\
         </div>',
       })

具名卡槽：

<h1 slot="header">我是父组件h1</h1>
<p>我是父组件p</p>
<p>我是父组件p</p>
<span slot="footer">我是父组件span</span>

 Vue.component('app2',{
   template:'<div>\
     <div class="header">\
       <slot name="header"></slot>\
     </div>\
     <div class="contatiner">\
       <slot></slot>\
     </div>\
     <div class="footer">\
       <slot name="footer"></slot>\
     </div>\
   </div>',
  })

屏幕截图 2022-07-28 152341.png

1.4、作用域插槽

作用域插槽是一种特殊的slot，使用一个可以复用的模板来替换已经渲染的元素
——从子组件获取数据
====template模板是不会被渲染的,新写法可以用p,span标签插槽等，不仅仅用emplate

<template slot="cdn" slot-scope="pro">
          {{pro.text}}--{{pro.ss}}
</template>

父组件通过slot-scope="pro"的方式，pro.xxx的方式来使用了

出现却实现了父组件调用子组件内部的数据，子组件的数据通过slot-scope属性传递到了父组件

name这个数据属于父组件的作用域，只能是父组件的数据

 Vue.component('app2',{
        template:'<div>\
         <slot text="我是子组件的内容" name="cdn" ss="ss"></slot>\
      </div>',
       }

1.5、访问slot 通过this.$slots.(NAME)

mounted:function () { 
//访问插槽 
var header = this.$slots.header;//拿到虚拟节点
var text = header[0].elm.innerText;
var html = header[0].elm.innerHTML;
console.log(header) 
console.log(text)
console.log(html)
}

1.6、组件高级用法–动态组件

VUE给我们提供了一个元素叫component
作用是：用来动态的挂载不同的组件
实现：使用is特性来进行实现的

 <div id="app">
      <component :is='non'></component>
      <button @click="handleView('appA')">点击第一句</button>
      <button @click="handleView('appB')">点击第二句</button>
      <button @click="handleView('appC')">点击第三句</button>
      <button @click="handleView('appD')">点击第四句</button>
</div>

 //点击不同按钮，显示不同试图
   Vue.component('appA',{
    template:'<p>君不见黄河之水天上来，奔流到海不复回。</p>'
   })
   Vue.component('appB',{
    template:'<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>'
   })
   Vue.component('appC',{
    template:'<p>人生得意须尽欢，莫使金樽空对月。</p>'
   })
   Vue.component('appD',{
    template:'<p>天生我材必有用，千金散尽还复来。</p>'
   })
  
    new Vue({
      el:'#app',
      data:{
        non:'appA',
      },
      methods:{
        handleView(tag){
          this.non = tag; 
        }
      }
       
    })

《vue-组件-slotk卡槽》