作用域插槽

AboutChild.vue

<template>

  <div>

    <div class="for">

      <h3 v-for="(item, index) in column" :key="index">

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

      </h3>

    </div>

  </div>

</template>

 

AbouView.vue

<template>

  <div>

    <AboutChild

      v-for="item in columns"

      :key="item.name"

      :column="item.childrenList"

    >

      <template #default="AAA">

        <List :ListData="AAA.item" />

      </template>

    </AboutChild>

  </div>

</template>

 这里的.item 就是<slot :item="item">里面设置的:item

把子组件的数据传递给父组件

 v-slot:default="AAA" -----> #default="AAA"（element-plus中用了大量的这种缩写）

为啥v-slot后面跟的是 default呢？ ====> 因为slot如果没有name属性的话， v-slot:default 匹配这些没有命名的slot;  有名字的话要 v-slot:名字 ="AAA" 来匹配

也就是说我如果 是 <slot name="yazhou" :item="item"> </slot>  那我就要写  v-slot:yazhou="AAA"

                        核心传给父组件的数据 是一个对象 然后{ 自定义的: 传递的内容}

<slot name="nigger" :bg="god.name"></slot>

自定义的名字是nigger  传递的是属性值和属性值 也就是 {bg:"god.name"}

例子

在son子组件中 

<template>

    <div>

         <div>

            <h1>儿子组件标题</h1>

            <span>

                <slot  :name="colums.slot" :rows="persons" :bg="god"></slot>

            </span>

            <div class="box">

                <slot name="nigger" :bg="god.name"></slot>

            </div>

         </div>

    </div>

</template>

<script>

    export default {

        data() {

            return {

                colums:{

                    slot:'axft'

                },

                god:{

                    name:'小李'

                },

                persons: [

                    {

                    name:'小王',

                    age:13,

                    sex:'男'

                },

                   {

                    name:'小红',

                    age:21,

                    sex:'男'

                },

                   {

                    name:'小刚',

                    age:33,

                    sex:'人妖'

                },

                ]

            }

        },

    }

</script>

在父组件中使用子组件son组件

#axft代表的是我在子组件中自定的插槽的name值

<template>

    <div>

<son>

    <template #axft="scopeProps">

        scopeProps就是子组件传递过来的数据 可以随便命名

          <br>

     {{scopeProps}}

     <br>

     这里的rows就相当于与是子组件传过来的person (:rows="persons")

     <br>

     {{scopeProps.rows}}

      <br>

    </template>

    <template  #nigger="{bg}">

        这里的模板中的bg值 是一个结构

        <br>

         scoped就是子组件传来的数据

         <br>

        scoped = {bg：'小李'}

        <br>

        相当于 let {bg} = scoped

      {{bg}}

    </template>

</son>

    </div>

</template>

最后的页面展示