Vue中的作用域插槽

作用域插槽（带数据的插槽）

:绑定数据的插槽

slot插槽

scope作用域

---

首先声明一个根组件也就是 vm实例，在创建一个子组件：

 // 子组件
        let child = {
            template:`#child`
        }

        // 根组件又叫父组件(基组件)
        let vm = new Vue({
            el:'#app',
        
        })

这里的template:`#child`是另一种写法，把组件的视图层诺到上面去使用，使用方法：

1.在实例挂载的div下面写上 template 标签，在给上id名(`#child`就是id名)

    <div id="app"></div>
    <template id="child">
        
    </template>

2.这里就是组件的视图层了，可以在里面写标签和插槽

<template id="child">
        <div>
            <h1>我是child子组件</h1>
        </div>
    </template>

3.在父组件中注册子组件

  let vm = new Vue({
            el:'#app',
            components:{
                // 键值对形式，相同时可以省略
                child
            }
        })

4.使用子组件

<div id="app">
        <!-- 使用组件 -->
        <child></child>
    </div>

 

下面的就统一使用这种方式

---

父拿子数据

1.在子组件中的数据中心中有个数组

 let child = {
            template:`#child`,
            data(){
                return {
                    list:['苹果','香蕉','橘子','西瓜']
                }
            }
        }

2.在子组件的插槽上要有数据

:value="item" 绑定数据，在父级中通过绑定的拿到数据，这里的value是自定义名称

 <!-- 2.子组件的插槽(slot)身上要自带数据 -->
    <template id="child">
        <div>
            <h1>我是child子组件</h1>
            <slot v-for="item in list" :value="item">
                {{item}}
            </slot>
        </div>
    </template>

3.在父级中拿到子级的数据

slot-scope   -- 获取作用域插槽内的数据, 固定写法，slot-scope="props"这个名字，可以任意命名。

props 里面 包含的是 -所有 传递 的数据（所有 传递 过来的属性以及对应的值）。

<div id="app">
        <child>
            <template slot-scope="zzh">
                <li>{{zzh.value}}</li>
            </template>
        </child>
    </div>

使用li为了区分是否拿到数据，查看结果：

---

子拿父数据 

1.在父组件中的数据中心中有个对象数组

 let vm = new Vue({
            el:'#app',
            data:{
                list:[
                        {id:1,title:'苹果'},
                        {id:2,title:'香蕉'},
                        {id:3,title:'橘子'},
                        {id:4,title:'西瓜'}
                    ]
            }
        })

2.要在子组件使用父组件的数据时,先通过窗口起个名

let child = {
            props: ["listdata"],
            template:`#child`
        }

3.这个名字指向父组件的数据中心的某条数据

<div id="app">

        <child :listdata="list"></child>
    </div>

4.在插槽接收父组件中的数据

 <template id="child">
        <div>
            <h1>我是child子组件</h1>
            <!-- 注意，上面已经绑定指向父组件中心的数据了，这里循环的就是listdata -->
            <slot v-for="item in listdata" :value="item">{{item}}</slot>
                        //:value 要写上,代表值的绑定
        </div>
    </template>

5.起名使用作用域插槽

 <div id="app">
        <child :listdata="list">
            <li slot-scope="zzh">
                {{zzh.value}}
            </li>
        </child>
    </div>