Vue13-插槽

Vue13-插槽

1.插槽简介

  1. 插槽可以让父组件向子组件中指定位置插入HTML结构。是一种组件间通信的方式,适用于父组件到子组件的通信。
  2. 插槽可以分为默认插槽、具名插槽和作用域插槽。

2.默认插槽

  1. 父组件中设置插槽的数据。
<template>
    <div class="container">
        <!--
        1 父组件中Category中的内容img是在父组件完成解析后被设置到Category组件中slot位置。
        2 父组件中有样式,则会携带样式放在插槽的位置。
		3 父组件中如果img有样式,则会将img和img携带样式一起放到插槽的位置。
        4 如果样式在插槽所在的组件,则父组件解析完放入插槽后,样式依然有用。
        5 如果父组件和插槽slot所在组件定义了相同的样式,则使用插槽slot所在组件的样式。
        -->
        <Category title="美食" :listData="this.foods">
            <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
        </Category>
        <Category title="游戏" :listData="this.games">
            <ul>
                <li v-for="(game,index) in games" :key="index">{{game}}</li>
            </ul>
        </Category>
        <Category title="电影" :listData="this.films">
            <!-- controls控制显示电影的播放按钮。 -->
            <video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
        </Category>
        <category></category>
    </div>
</template>

<script>
    import Category from "./components/Category";

    export default {
        name: "App",
        data() {
            return {
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好,李焕英》']
            }
        },
        components: {Category}
    }
</script>

<style>
    .container {
        display: flex;
        justify-content: space-around;
    }
    img {
        width: 100%;
    }
    video {
        width: 100px;
    }
</style>
  1. 子组件中使用slot标签定义插槽。
<template>
    <div class="category">
        <h2>{{title}}分类</h2>
        <!-- 定义一个插槽 -->
        <slot>定义一个插槽,当组件的使用者没有传递具体的数据时,显示这段文字。</slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props: ['listData', 'title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h2 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
</style>

3.具名插槽

  1. 子组件中定义多个插槽,通过name给插槽slot定义名称。
  2. 父组件中通过slot="xxx"指定标签放入子组件的插槽。
  3. 父组件想要将多个元素放入到一个插槽,可以使用template将多个元素包裹。
  4. 父组件中设置插入的数据。
<template>
    <div class="container">
        <Category title="美食" :listData="this.foods">
            <!-- slot="center",将img标签放入到子组件name="center"插槽。 -->
            <img slot="center" src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="">
            <a slot="footer" href="www.baidu.com">更多美食</a>
        </Category>
        <Category title="游戏" :listData="this.games">
            <ul slot="center">
                <li v-for="(game,index) in games" :key="index">{{game}}</li>
            </ul>

            <div class="foot" slot="footer">
                <a href="www.baidu.com">网络游戏</a>
                <a href="www.baidu.com">单机游戏</a>
            </div>
        </Category>
        <Category title="电影" :listData="this.films">
            <video slot="center" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
            <!-- 当有多个结构都需要放在一个插槽时,可以使用template将这些结构包裹。
             使用div包裹也可以,但是div会被解析为真实的DOM元素,而template不会被解析为真实的DOM元素。

             使用template标签后,具名插槽有两种使用方式。
                slot="footer"
                v-slot:footer
             -->
            <template v-slot:footer>
                <div class="foot" >
                    <a href="www.baidu.com">经典</a>
                    <a href="www.baidu.com">热门</a>
                    <a href="www.baidu.com">推荐</a>
                </div>
                <h4>更多电影</h4>
            </template>
        </Category>
        <category></category>
    </div>
</template>

<script>
    import Category from "./components/Category";

    export default {
        name: "App",
        data() {
            return {
                foods:['火锅','烧烤','小龙虾','牛排'],
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
                films:['《教父》','《拆弹专家》','《你好,李焕英》','《尚硅谷》']
            }
        },
        components: {Category}
    }
</script>

<style>
    .container,.foot {
        display: flex;
        justify-content: space-around;
    }
    h4 {
        text-align: center;
    }
    img {
        width: 100%;
    }
    video {
        width: 100px;
    }
</style>

  1. 子组件中定义插槽。
<template>
    <div class="category">
        <h2>{{title}}分类</h2>
        <!-- 定义一个插槽 -->
        <slot name="center">定义一个插槽,当组件的使用者没有传递具体的数据时,显示这段文字。</slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        props: ['listData', 'title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h2 {
        text-align: center;
        background-color: orange;
    }
    video {
        width: 100%;
    }
</style>

4.作用域插槽

  1. 作用域插槽可以将插槽中的数据传递给插槽的使用者。
  2. 插槽的使用者接受到的数据是一个对象,因为插槽可以传递多个数据。
<!-- 子组件中通过:games="games"将数据传递给插槽的使用者。插槽接受到的数据是一个
	对象,对象的key是传递时的:games,对象的形式为{'games': xxx, 'xxx': xxx}
-->
<slot :games="games"></slot>
  1. 插槽的使用要接受到插槽的数据必须使用template标签。
  2. 父组件中接受插槽slot传递的数据。
<template>
    <div class="container">
        <Category title="游戏">
            <template scope="data">
                <ul>
                    <li v-for="(game,index) in data.games" :key="index">{{game}}</li>
                </ul>
                {{data.message}}
            </template>
        </Category>
        <Category title="游戏">
            <!-- {games}或者数据是ES6新语法 -->
            <template scope="{games}">
                <ol>
                    <li v-for="(game,index) in games" :key="index">{{game}}</li>
                </ol>
            </template>
        </Category>
        <Category title="游戏">
            <!-- vue新版本使用slot-scope接受数据。 -->
            <template slot-scope="{games}">
                <h4 v-for="(game,index) in games" :key="index">{{game}}</h4> <br>
            </template>
        </Category>
    </div>
</template>

<script>

    import Category from "./components/Category";

    export default {
        name: "App",
        components: {Category}
    }
</script>

<style>
    .container,.foot {
        display: flex;
        justify-content: space-around;
    }
    h4 {
        text-align: center;
    }
</style>
  1. 子组件通过插槽slot给父组件传递数据。
<template>
    <div class="category">
        <h2>{{title}}分类</h2>
        <!-- 定义一个插槽 -->
        <slot :games="games" message="hello">定义一个插槽,当组件的使用者没有传递具体的数据时,显示这段文字。</slot>
    </div>
</template>

<script>
    export default {
        name: "Category",
        data() {
            return {
                games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
            }
        },
        props: ['listData', 'title']
    }
</script>

<style scoped>
    .category {
        background-color: skyblue;
        width: 200px;
        height: 300px;
    }

    h2 {
        text-align: center;
        background-color: orange;
    }
</style>
posted @ 2022-11-25 11:08  行稳致远方  阅读(68)  评论(0)    收藏  举报