Vue作用域插槽个人简单理解 slot-scope&v-slot 的使用方法

slot-scope：废弃方法

v-slot：2.6.0 新增

1.先看看slot-scope的使用方法

子组件 ChildCom.vue：

<template>  
  <div>    
　　<header>header</header>  
    <main>
      <slot>  // 这是一个默认插槽，父组件调用子组件时默认显示的内容
        <p>{{ content }}</p>
      </slot>
    </main>
    <footer>footer</footer>
  </div>
</template>

<script>
export default {
  name: 'childCom',
  data() {
    return {
      content: '子组件子组件子组件',
　　　　msg: '今天周五，明天放假' 
    }
  }
}

</script>

父组件 FatherCom.vue：

<template>
  <div>
    <childCom></childCom>
  </div>
</template>

<script>
import childCom '@/components/ChildCom.vue' // 引用子组件
export default {
  name: 'fatherCom',
  components: {
    childCom // 注册子组件
    }
}
</script>

若父组件单纯引入子组件，不添加自定义内容；

此时的页面效果是这样子的，显示子组件默认插槽的内容。

父组件如何拿到子组件childCom data里的msg值？

第一步：在默认插槽里绑定一个变量子组件里把msg（值）抛出去

<main>
    <slot :childMsg="msg">  // 把msg以childMsg的变量名抛出去 （childMsg根据自己喜好来命名，可随意命名）
      <p>{{ content }}</p>
    </slot>
</main>

第二步：父组件声明一个字段（对象）用来接收数据

<template>
  <div>
    <childCom>
      <template slot-scope="recieveData"> // recieveData根据自己的喜好命名，可随意命名
        <h1>{{ recieveData.childMsg}} 父组件父组件</h1> // 输出子组件传过来的msg值
      </template> 
    </childCom>
  </div>>
</template>

页面效果：

子组件用来传递的变量 & 父组件接收的变量都是任意取的，如下：

（PS：若为具名插槽泽添加对应的name属性就好 

2.新语法v-slot的用法 - v-slot:插槽名[="接收子组件值的变量名"]

v-slot的出现是为了省去冗长的 template、slot-scope 写法

（v-slot:default 指定默认插槽，可以简写为v-slot

 

That's all, 更详细的使用方式可以参考下官网（缩写、解构赋值）

实战例子讲解：Vue作用域插槽实战例子