Vue

Vue - 插槽系统

Posted on 12-11 2019,4 min read

Vue - 插槽系统


Organized by安南 City

Completion time2019-12-11

Send error to emailcity@nanzc.com


Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将 <slot> 元素作为

承载分发内容的出口。

注意: 父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

 

基本使用


插槽的作用就是把值放入到 子组件 预留的指定位置

 

父组件

<template>
	<div id="parent">
        <!-- 使用子组件:未插值 -->
        <child></child>
        <!-- 使用子组件:插值 -->
        <child>将不会显示默认内容</child>
    </div>
</template>

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

子组件

<template>
	<div id="child">
        <!-- 1.使用 slot 标签占位 -->
        <slot>默认内容:父组件未插值时显示<slot>
    </div>
</template>

<script>
    export default {}
</script>

 

具名插槽


当我们需要多个插槽时,我们必须区分它们

  • 定义插槽名:<slot name="slotName">Content</slot>
    • 默认插槽名:default
  • 使用指定插槽:
    • <template v-slot:header>Content</template>
    • 简写:<template #header>Content</template>

 

父组件

<template>
	<div id="parent">
        <child>
            <!-- template:起到临时包裹的作用,不会被解析到 html -->
            <template v-slot:header>
                <p>头部信息1</p>
                <p>头部信息2</p>
            </template>
            <p>主要内容1</p>
            <p>主要内容2</p>
            <template v-slot:footer>
                <p>底部信息1</p>
                <p>底部信息2</p>
            </template>
    	</child>
    </div>
</template>

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

子组件

<template>
	<div id="child">
        <header>
            <slot name="header">头部默认内容</slot>
        </header>
        <main>
            <slot>默认插槽</slot>
        </main>
        <footer>
            <slot name="footer">底部默认内容</slot>
        </footer>
    </div>
</template>

<script>
    export default {}
</script>

 

作用域插槽


有时让插槽内容能够访问子组件中才有的数据是很有用的。

 

父组件

<template>
	<div id="parent">
        <child :child-user="parentUser">
            <!-- 在 v-slot 属性值中接收绑定的参数,对应绑定属性名,以下为解构形式 -->
            <template v-slot="{ name, lastName }">
                {{ name + lastName }}
            </template>
    	</child>
    </div>
</template>

<script>
    import child from "./child"
    
    export default {	
        data(){
            return{
                parentUser: {
                    name: "City",
                    lastName: "AnNan"
                }
            }
        },
        methods: {}
        components:{
            child
        }
    }
</script>

子组件

<template>
	<div id="child">
         <!-- 使用属性的方式,向插槽绑定数据 -->
         <slot :user="childUser">{{ "默认显示:" + user.name }}<slot/>
    </div>
</template>

<script>
    export default {
        props: ['childUser']
    }
</script>

 

下一篇: Vue - 组件数据交互