奇怪的作用域插槽

作用域插槽

概念

在父组件中依旧能够使用到子组件中定义的数据

方法

在子组件中如此定义：

<slot name='er' :hello='note'>默认内容</slot>

其中：
name是给当前插槽定义的名字，目的是为了在具有多个插槽的情况下，在父组件中可以通过名字来准确锁定当前的template是写给哪一个插槽的
hello是自定义的一个属性名，目的是将note以属性值挂载在插槽模块里
note是我在data中定义的数据

在父组件中如此接收：

<template #er='scoped'>
                 {{scoped.hello.aa}}
         </template>

其中：
slot是对于子组件插槽中name的锁定
slot-scope是对于子组件中:hello挂载属性值的接收
scoped是自定义的成员变量名，在此处作为接收属性值的载体
scoped.hello.aa是在接收的成员变量中寻找作为挂载属性名的hello，然后在hello中找到要使用的数据

数据的定义如下：

data(){
    return {
        note:{
            aa:'hello',
            bb:'hi'
        }
        }

特殊点

1.如果不写作用域插槽，name在父组件中的接收可以写为v-slot=‘name’,或者#name,但是如果写了，就需要写成slot=‘name’ ,slot-scope=‘自定义成员变量名’，否则会报错
2.如果只写单个作用域插槽，可以在子组件插槽中不写name，在父组件接收的时候直接写v-slot=‘自定义成员变量名’
3.太多了，不写了

推荐写法

1.建议给每个插槽都配置一个name属性，并在父组件中锁定name再给填充内容
2.在父组件中这么进行接收：

<template v-slot:er='scoped'></template>
//或<template #er='scopes'></template>

3.当不知道子组件中传入数据时使用的属性名时，可以如下打印：

<template v-slot:er='scoped'>
{{scoped}}
</template>

可以将 传入的值打印出来，打印出来数据中的对象名就是子组件中使用的属性名