vue2知识点：组件插槽分发

2024-10-27 30

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue2知识点：组件插槽分发

@[toc]

3.14插槽分发

父子组件使用时,有时需要将父元素的模板跟子元素模板进行混合,这时就要用到slot插槽进行内容分发, 简单理解就是在子模板定义中先占个位置等待父组件调用时进行模板插入。

3.14.1slot插槽

注意：在子组件模板定义中使用\标签定义插槽位置，标签中可以填写内容，当父组件调用子组件且不传入内容时显示此\标签体中内容，当父组件在引用\子组件时，标签中的内容会放在子组件的\插槽中。

举例

完整代码：

<div id="app">
    <!-- 传入数据 -->
    <child :msg="msgText">
        <!-- 传入模板,混合子模板 -->
        <h4>父组件模板</h4>
        <h5>模板混入....</h5>
    </child>
</div>

<template id="child-template">
    <div>
        <div>我是子组件</div>
        <div>{
   {
   msg}}</div>
        <!-- 定义slot插槽进行占位 -->
        <slot>我是默认内容,父组件不传入时我显示</slot>
    </div>
</template>
<script>
    Vue.component('child', {
   
        template:'#child-template',
        props:['msg']
    });
    var app = new Vue({
   
        el:'#app',
        data:{
   
            msgText:'父组件数据'
        }
    });
</script>

结果展示

3.14.2具名插槽

具名插槽slot, 就是给插槽起个名字。在子组件定义时可以定义多个\插槽,同时通过name属性指定一个名字就可实现匹配,如:\，父组件引用时使用\< slot='header'>进行匹配插槽插入元素。

注意点1：子组件模板定义了两个插槽header和footer，分别使用name属性进行名称的指定，父组件引用子组件的标签中通过slot属性，来确定内容需要分发到哪个插槽里面。

大白话讲：slot标签通过配置name="header"名字，而父组件引用子组件的待传入标签通过配置slot="header"进行匹配插槽位置。

举例

完整代码：

<div id="app">
    <!-- 传入数据 -->
    <child :msg="msgText">
        <!-- 传入模板,混合子模板 -->
        <h4 slot="header">头部</h4>
        <h4 slot="footer">底部</h4>
    </child>
</div>

<template id="child-template">
    <div>
        <!-- 插槽header -->
        <slot name="header"></slot>
        <div>我是子组件</div>
        <div>{
   {
   msg}}</div>
        <!-- 插槽footer -->
        <slot name="footer"></slot>
    </div>
</template>
<script>
    Vue.component('child', {
   
        template:'#child-template',
        props:['msg']
    });
    var app = new Vue({
   
        el:'#app',
        data:{
   
            msgText:'父组件数据'
        }
    });
</script>

结果展示

3.14.3作用域插槽slot-scope

作用域插槽slot-scope，父组件通过插槽混入子组件的内容, 子组件也可以通过slot作用域向插槽slot内部传入数据，使用方式:\，父组件通过\进行引用。

大白话讲就是：子组件插槽slot定义属性，让父组件待插入的标签内容可以直接使用slot定义的属性内容。

说明点1：在slot标签中指定属性值，类似于props属性的使用，只不过是反过来的。即：组件标签中props属性用于父传子，而slot标签中指定属性值，是子传父。

说明点2：引用时用template标签指定，slot-scope属性指定接收数据的变量名，就可以使用花括号形式取值了。

完整代码：

<div id="app">
    <!-- 传入数据 -->
<child>
       <!-- slot-scope的值可以随便起变量名 -->
        <template slot-scope="props">
            <div>{
   {
   msgText}}</div>
            <div>{
   {
   props.text}}</div>
        </template>
    </child>
</div>

<template id="child-template">
    <div>
        <!-- 插槽text值 -->
        <slot text="子组件数据" ></slot>
    </div>
</template>
<script>
    Vue.component('child', {
   
        template:'#child-template'
    });
    var app = new Vue({
   
        el:'#app',
        data:{
   
            msgText:'父组件数据'
        }
    });
</script>

3.14.4slot-scope版本更新

在2.5+之后,可以不局限于\, 任何元素都可以，同时可以使用解构赋值的方式进行数据解析。

子组件：

<template id="child-template">
    <div>
        <!-- 插槽text值 -->
        <slot name="head" text="header"></slot>
        <slot name="foot" text="footer" value="18"></slot>
        <slot name="cont" text="content" title="main"></slot>
    </div>
</template>

父组件使用：

<div id="app">
    <!-- 传入数据 -->
    <child>
        <!-- div标签使用slot-scope -->
        <div slot="head" slot-scope="props">子组件数据: {
   {
   props.text}} <span>{
   {
   fa}}</span></div>
        <div slot="foot" slot-scope="props">{
   {
   props.text}} == {
   {
   props.value}}</div>
        <!-- 结构赋值 -->
        <div slot="cont" slot-scope="{text, title}">{
   {
   text}} == {
   {
   title}}</div>
    </child>
</div>

js部分：

Vue.component('child', {
   
    template:'#child-template'
});
var app = new Vue({
   
    el:'#app',
    data:{
   
        fa:'father 数据'
    }
});