vue插槽 slot

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
vue文档

子组件：

<template>
  <div>
      <h1>我是seo组件</h1>
      <!-- header -->
      <slot name="header" :row='obj'>
        
      </slot>
      <!-- middle 匿名插槽-->
      <slot >
        
      </slot>
      <!-- footer -->
      <slot name="footer" :row='obj'>
        
      </slot>
  </div>
</template>

<script>
export default {
    data(){
        return{
            obj:{
                header:"头部内容",
                footer:"尾部内容"
            }
        }
    }
}
</script>

slot中name属性和父组件中v-slot：后面跟的参数一致，则会让父组件中的template内容在这展示。即通过具名来判断，父组件的内容分发到那一块。
由于组件之间作用域是独立的，如果想在父组件中用到子组件的数据，则需要用到作用域插槽。

自 2.6.0 起有所更新。已废弃的使用 slot-scope attribute 的语法。但是依旧可以使用，直到Vue3.0中废弃。

作用域插槽使用就是在子组件中用属性绑定在 具名插槽的元素上，然后在父组件中v-slot:(插槽的名字)='scope',scope是自己写的获取的变量，可以自行定义。

父组件：

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <seo>
            <!-- footer -->
            <template v-slot:footer="scope">
                <h1>footer</h1>
                <div>
                    {{scope.row.footer}}
                </div>
            </template>
            <!-- header -->
            <template v-slot:header='scope'>
                <h1>title</h1>
                <div>
                    {{scope.row.header}}
                </div>
            </template>
            <!-- middle 非具名插槽都会显示在匿名插槽中-->
            <div>
                我是在父组件中的插槽middle
            </div>
            <h1>123</h1>
            
        </seo>
    </div>
</template>

<script>
import seo from "../components/seo"
export default {
    components:{
        seo,
    },
    data(){
        return{
        }
    }

}
</script>

在子组件中定义好位置以后，父组件中内容分发，是无所谓位置的。比如我这header部分和footer部分就不是对应位置。

展示效果

预览.png

接着我们就可以在父组件中修改子组件的分发上来的数据了。

<template>
    <div class="about">
        <h1>This is an about page</h1>
        <seo>
            <template v-slot:footer="scope">
                <h1>footer</h1>
                <div>
                    <el-select v-model="scope.row.footer">
                        <el-option v-for="item in footer_list" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    {{scope.row.footer}}
                </div>
            </template>
            <template v-slot:header='scope'>
                <h1>title</h1>
                <div>
                    {{scope.row.header}}
                </div>
            </template>
            <div>
                我是在父组件中的插槽middle
            </div>
            <h1>123</h1>
            
        </seo>
    </div>
</template>

<script>
import seo from "../components/seo"
export default {
    components:{
        seo,
    },
    data(){
        return{
            footer_list:[
                {id:1,name:'1底部43'},
                {id:2,name:'2底部93'},
            ]
        }
    }

}
</script>

预览2.png

当我选择下拉选择‘1底部43’

预览3.png