Vue组件通信

插槽

1. 什么是插槽：

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模

板代码

2. 插槽的作用 :

更好的复用组件

3. 插槽的分类 :

匿名插槽

具名插槽

作用域插槽

1.1 匿名插槽

没有名字的插槽 , 只需在子组件里面调用组件，用来占位

在父组件里面，去定义内容

<!-- child.vue -->

<template>

<div>

我是子组件

<!-- 插槽位置 -->

<slot />

</div>

</template>

<script>

export default {}

</script>

<!-- parent.vue -->

<template>

<div> 1.2 具名插槽

具有名字的插槽就是具名插槽

使用 <slot /> 中的 "name" 属性绑定元素， name 就是插槽的名字

我是父组件

<child>

<!-- 插槽内容 -->

<strong> 你好啊 </strong>

</child>

</div>

</template>

<script>

import Child from './child' ;

export default {

components : {

child : Child

}

}

</script>

<!-- 子组件 -->

<template>

<div>

我是子组件

<!-- 插槽定义 -->

<slot name = "header" ></slot>

<slot></slot>

<slot name = "footer" ></slot>

</div>

</template>

<script>

export default {}

</script>

<!-- 父组件 -->

<template>

<div>

我是父组件

<base-layout>

<!--#header 是 slot="header" 的缩写； template 模板的作用是可以将两个 header 标签

看成一个整体 -->

<!-- 插槽内容 -->

<template #header >

<header> 我是 header </header>

<header> 我是 header2 </header>

</template>

<main>

<p> 我是内容 1 </p>

<p> 我是内容 2 </p>

</main>

<footer slot = "footer" > 我是 footer </footer>

</base-layout>

</div> 1.3 作用域插槽

作用：

可以让父组件对子组件的内容进行加工处理

既可以复用子组件的 slot ，又可以使 slot 内容不一致

使用方式：

子组件中给 <slot> 标签绑定要传递的数据

在父组件中使用 v-slot 指令来绑定一个自定义属性

父组件通过绑定的自定义属性值来接收子组件的值

</template>

<script>

import BaseLayout from './base' ;

export default {

components : {

'base-layout' : BaseLayout

}

}

</script>

<!-- 子组件 :zuoyong.vue-->

<template>

<div>

<ul>

<li v-for = "item in list" :key = "item.id" >

<!-- 插槽位置 -->

<slot :info = "item" ></slot>

</li>

</ul>

</div>

</template>

<script>

export default {

props : [ 'list' ]

}

</script>

<!-- 父组件： parent.vue -->

<template>

<div>

我是父组件

<zuoyong :list = "list" >

<!-- 插槽内容 -->

<template v-slot = "slotProps" >

<span v-if = "slotProps.info.id === 1" class = "active" >

{{ slotProps.info.uname }}

</span>

<span v-else > {{ slotProps.info.uname }} </span>

</template>

</zuoyong>

</div>

</template>

<script>

import Zuoyong from './zuoyong' ; 2 案例讲解 -TODO

案例效果演示：

项目目录结构：

export default {

data () {

return {

list : [

{ id : 1 , uname : " 张三 " },

{ id : 2 , uname : " 李四 " },

{ id : 3 , uname : " 王五 " }

]

}

},

components : {

zuoyong : Zuoyong

}

}

</script>

<style scoped >

.active {

color : #f00 ;

}

</style>