vue 插槽 作用域插槽 slot-scope

vue 插槽 作用域插槽(slot-scope)

作用域插槽在项目中使用起来 可以大大提高开发效率。理解起来不会很难。在哪之前，要先学习一下插槽-slot的使用 插槽可以简单分为匿名插槽 具名插槽

匿名插槽

子组件中 添加一个匿名插槽

<template>
    <div>
        <div>我是子组件</div>
        <div>{{ pData }}</div>
        //如果父组件中没有给插槽一个内容的话  那么就会显示： 我是默认内容
        <slot>我是默认内容</slot>
    </div>
</template>
<script>
	data() {
		return {}
	},
	 props: { //接收父组件传递过来的值
	    pData:{
             type: String,//类型
             value:'默认内容'//默认值
        },
	}
</script>

父组件中使用： 里面的内容就是替换给slot的内容 ------简单理解就是子组件中自己挖一个坑 然后父组件中决定给这个坑了填什么内容

<template>
	//:pData="msg"  将data中的msg 通过这种方式传递给子组件 子组件用props接收 具体看上面具体代码
	<mcon :pData="msg">
         <div>我是给插槽里面的内容</div>
    </mcon>
</template>

<script>
//导入子组件
import mcon from "../../components/common_vue/textslotscopr/text"
export default {
    data() {
        return {  
        	msg:"介绍以下  我是父给子传值"
        }
    },
    components: { mcon }// 在conponents中注册子组件中才能使用
</script>

实际页面中的html代码代码

具名插槽

父组件想要给指定的插槽填入内容时 这时候就需要使用具名插槽 也就是给插槽起一个名字 外号 等父组件中要用到的时候就可以很快找到。（子组件中给每个坑都起了一个名字 父组件根据名字填入内容）

子组件中代码如下：

<template>
    <div>
        <div>我是子组件</div>
        <div>{{ pData }}</div>
        <slot name="flower">我是默认内容</slot>
        <slot name="water">我是默认内容</slot>
    </div>
</template>

 props: { //接收父组件传递过来的值
	    pData:{
             type: String,//类型
             value:'默认内容'//默认值
        },
	}

父组件中代码如下：

<template>
	<mcon :pData="msg">
         <div slot="water" class="water">我是水water</div>//给name="water"的插槽
         <div slot="flower" class="flower">我是花flower</div>//给name="flower"的插槽
    </mcon>
</template>

<script>
//导入子组件
import mcon from "../../components/common_vue/textslotscopr/text"
export default {
    data() {
        return {  
        	msg:"介绍以下  我是父给子传值"
        }
    },
    components: { mcon }// 在conponents中注册子组件中才能使用
</script>

网页上实际代码如下

作用域插槽 slot-scope

上面介绍了插槽的使用 现在来说一下作用域插槽中的使用 (对表格 列表 循环等非常有用)

子组件中代码如下

	<template>
    <div>
        <div>我是子组件</div>
        <div>{{ arr }}</div>
        //如果父组件中没有给插槽一个内容的话  那么就会显示： 我是默认内容
		<div v-for="(item,index) in arr" :key="index">
			<slot :row="item"></slot>
		</div>
        
    </div>
</template>
<script>
	data() {
		return {}
	},
	 props: { //接收父组件传递过来的值
	    arr:{
             type: Array,//类型
             default:()=>{
             	return []
             }//默认值
        },
	}
</script>

父组件中

<template>
	<mcon :arr="arr">
 		<template slot-scope="scope">
             <div> {{scope.row}}</div>
        </template>
    </mcon>
</template>

<script>
//导入子组件
import mcon from "../../components/common_vue/textslotscopr/text"
export default {
    data() {
        return {  
        	arr:[
        		{"name":"John","age":24},
        		{"name":"Tom","age":25}
        		{"name":"Jake","age":16}
        	]
        }
    },
    components: { mcon }// 在conponents中注册子组件中才能使用
</script>

解释看如下图 ，slot-scope=‘scope’ scope是可以自己定义的 scope接收到是一个对象

页面效果如下

当然 slot中的属性名 属性值可以自己定义 都是通过slot-scope=“youName” 来接受 youName中存放的就是slot中的属性键值对

简单理解的话如下 看完这个 就很快能理解上面的例子

//子
<slot msg="我是数据" arr="我是一个数组">   </slot>

//父    那么  scpoe就是  { {"msg":"我是数据"}, {"arr":"我是一个数组"} }  
<template slot-scope="scope"></template>