Vue 组件化开发之插槽

前端开发作者： 2024-08-20 09:30:01

插槽的作用相信看过前一篇组件化开发后，你对组件化开发有了新的认识。插槽是干什么的呢？它其实是配合组件一起使用的，让一个组件能够更加的灵活多变，如下图所示，你可以将组件当作一块电脑主板，将插槽当作主

插槽的作用

匿名插槽

<body>

<div id="app">
    <navigation>
        <span>这是导航</span>
    </navigation>
</div>

<template id="navigation">
    <main>
        <slot>没有内容时显示我</slot>
    </main>
</template>

<script src="./vue.js"></script>
<script>

    Vue.component("navigation",{
        template: "#navigation",})

    const app = new Vue({
        el: "#app",})
</script>

</body>

具名插槽

<style>
    @font-face {
        font-family: 'iconfont';  /* project id 1953712 */
        src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot');
        src: url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff2') format('woff2'),url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.woff') format('woff'),url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.ttf') format('truetype'),url('//at.alicdn.com/t/font_1953712_uiyayrse2ul.svg#iconfont') format('svg');
    }

    .iconfont {
        font-family: "iconfont";
        font-size: 16px;
        font-style: normal;
    }

    i {
        flex-grow: 2;
        text-align: center;
    }

    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }


    nav {
        width: 100%;
        background-color: rgba(255,162,109,0.8);
        padding: 10px;
        margin-bottom: 20px;
    }

    .navigation {
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
    }

    input {
        flex-grow: 6;
        border-radius: 3rem;
        text-align: center;
        outline: none;
    }

</style>
<body>

<div id="app">
	<!-- 第一个个导航条，中间用默认的input框 -->
    <nav>
        <navigation class="navigation">
        	<!-- 插入时，指定slot属性 -->
            <i class="iconfont" slot="left" :style="{fontSize:'2rem'}">&#xe628;</i>
            <i class="iconfont" slot="right" :style="{fontSize:'2rem'}">&#xe662;</i>
        </navigation>
    </nav>

	<!-- 第二个导航条，不需要默认的input框，所以用div填充 -->
    <nav style="background-color: aliceblue">
        <navigation class="navigation">
            <i class="iconfont" slot="left" :style="{fontSize:'2rem'}">&#xe737;</i>
            <div slot="mid" style="width: 70%;text-align: center">双十一狂欢夜</div>
            <i class="iconfont" slot="right" :style="{fontSize:'2rem'}">&#xe600;</i>
        </navigation>
    </nav>

	<!-- 第三个导航条，不需要默认的input框，所以用div填充 -->
    <nav style="background-color: #ffaad8">
        <navigation class="navigation">
            <i class="iconfont" slot="left" :style="{fontSize:'2rem'}">&#xe61a;</i>
            <div slot="mid" style="width: 70%;text-align: center">我的资料</div>
            <i class="iconfont" slot="right" :style="{fontSize:'2rem'}">&#xe654;</i>
        </navigation>
    </nav>

</div>

<template id="navigation">
    <main>
    	<!-- 给插槽取名 name属性-->
        <slot name="left"></slot>
        <slot name="mid"><input type="text" placeholder="输入你的搜索项" :style="{height:'2rem'}"></slot>
        <slot name="right"></slot>
    </main>
</template>

<script src="./vue.js"></script>
<script>

    Vue.component("navigation",})
</script>

</body>

编译作用域

<body>

<div id="app">
    <cpn>
        <span slot="cpn-slot" v-show="show">引用父组件的show</span>
    </cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn-template">
    <div>
        <span v-show="show">引用子组件的show</span>
        <slot name="cpn-slot"></slot>
    </div>
</template>

<script src="./vue.js"></script>
<script>
    var cpn = {
        template: "#cpn-template",data() {
            return {
                show: false,}
        }
    }
    const app = new Vue({
        el: "#app",data: {
            show: true,},components: {  // Vue实例内部进行注册
            cpn,})
</script>
</body>

作用域插槽

<body>
<div id="app">
    <cpn :user-msg="msg"></cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn-template">
    <div>
        <ul>
            <li v-for="row in userMsg">{{row}}</li>
        </ul>
    </div>
</template>

<script src="./vue.js"></script>
<script>
    var cpn = {
        template: "#cpn-template",props: ["userMsg",],}

    const app = new Vue({
        el: "#app",data: {
            msg: {
                id: 1,name: "yunya",age: 18,}
        },components: {
            cpn,}
    })
</script>
</body>

<body>
<div id="app">
    <cpn :user-msg="msg">
        <template slot="message" scope="v">
            <ul>
                <li><b>{{v.field}}</b></li>
            </ul>
        </template>
    </cpn>
</div>

<!-- 子组件模板 -->
<template id="cpn-template">
    <div>
        <slot name="message" v-for="row in userMsg" :field="row"></slot>
    </div>
</template>

<script src="./vue.js"></script>
<script>
    var cpn = {
        template: "#cpn-template",}
    })
</script>
</body>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65441.html

相关资讯： Vue 组件化开发之插槽