简单理解Vue插槽(笔记)

1. 匿名插槽

当父组件使用封装好的子组件时, 子组件内的某一处不确定使用何种标签和内容, 就可以使用插槽技术

<!-- 子组件: -->
<template>
	<div>xxx</div>
	<!-- 子组件中这个位置的内容不确定或者说需要依赖父组件的内容决定, 用 slot 标签占位 -->
	<slot>这里是父组件没有写入内容时默认显示的内容</slot>
</template>

<!-- 父组件: -->
<template>
	<子组件名>
    	<!-- 会展示在子组件的 slot 标签位置 -->
    	<p>这里是我想要展示的内容</p>
	</子组件名>
</template>

---

2. 具名插槽

当父组件在使用子组件时, 子组件内有多处不确定使用何种标签和内容的地方, 不仅需要用到插槽技术, 还要给插槽添加 name 属性, 这样才能分清什么内容放在什么插槽的位置, 这就是具名插槽

<!-- 子组件: -->
<template>
	<div>xxx</div>
	<slot name="title"></slot>
	<div>xxx</div>
	<slot name="content"></slot>
	<div>xxx</div>
</template>


<!-- 父组件: -->
<template>
	<子组件名>
    	<!-- slot="xxx" 已废弃 -->
    	<!-- <h2 slot="title">这里是我要展示的第一个插槽内容</h2> -->
    
    	<!-- 需要<template> 标签的配合 -->
    	<template v-slot:title>  
        	<h2>这里是我要展示的第一个插槽内容</h2>
    	</template>
    
    	<!-- 这里的 v-slot: 可以用 # 替代, 也只有 v-slot: 可以用 # 替代 -->
    	<template #content>
        	<p>这里是我要展示的第二个插槽的内容</p>
    	</template>
	</子组件名>
</template>

---

3. 作用域插槽

当父组件想要在使用插槽的同时还希望使用子组件内的变量, 可以使用作用域插槽

<!-- 子组件: -->
<div>
    <!-- 第一步: 在 slot 标签上自定义属性 变量名1, 和组件内的对象关联(插槽 props) -->
    <!-- 该对象内保存了属性名和属性值 -->
    <slot :变量名1="对象名称"></slot>
</div>

<!-- 父组件: -->
<组件名>
    <!-- slot-scope 已弃用 -->
    <p slot-scope="变量名2">{{ 变量名2.变量名1.属性名 }}</p>
    
    <!-- 第二步: 使用组件, <template> 标签和 v-slot = "变量名2" -->
	<!-- 变量名2 会收集子组件 <slot> 标签身上的属性和值并形成对象, 这里的 变量名2 就相当于 { 变量名1: "对象名称"} 这个对象 -->
    <!-- 需要 <template> 标签的配合, 这里的 v-slot 后面跟的是 =(等号) -->
    <template v-slot="变量名2">
    	<!-- 这时候 p 标签内显示的就是子组件内对象中的属性值 -->
    	<p>{{ 变量名2.变量名1.属性名 }}</p>
    </template>
</组件名>

<!-- 例: -->
<!-- 子组件 son: -->
<template>
	<div>
    	<div>我是子组件</div>
    	<!-- 第一步: 在 slot 标签上自定义属性 row, 和组件内的对象关联, 该对象内保存了属性名和属性值 -->
    	<slot :row="myData">{{ myData.name }}</slot>
	</div>
</template>

<script>
export default {
  name: 'son',
  data () {
    return {
        myData: {
            name: 'zs',
            age: '18'
        }
    }
  }
}
</script>


<!-- 父组件 parent: -->
<template>
	<div>我是父组件</div>
	<Son>
        <!-- 第二步: 使用组件, <template> 标签和 v-slot="scope" -->
    	<template v-slot="scope">
         	<p>{{ scope.row.name === 'zs' ? '张三' : '李四' }}</p>
    	</template>
    
    	<!-- 也可以解构出 row 属性 -->
    	<template v-slot="{ row }">
        	<p>{{ row.name === 'zs' ? '张三' : '李四' }}</p>
    	</template>
	</Son>
</template>


<script>
<!-- 引入并注册子组件 -->
import Son from './components/son.vue'
export default {
  name: 'father',
  components: { Son }
}
</script>