Vue学习23_Vue插槽slot的使用

Vue插槽slot的使用

在组件开发过程中,我们有时候需要对组件预留出一个位置,根据需要往其中插入某些内容,倘若将组件写死,内容固定,不利用我们对组件的重复使用,Vue中引入了插槽的概念,使得我们能够在组建开发中,为组件预留出位置,在需要使用时根据需求插入不同的组件。

  1. 插槽的基本使用
    示例代码
    <div id="app">
        <div>
            <cpn>
                <button>按钮</button>
            </cpn>
            <cpn>
                <p>插槽内容</p>
            </cpn>
            <cpn></cpn>
            <cpn></cpn>
        </div>
    </div>

    <template id="cpn">
        <div>
            <h2>我是组件</h2>
            <p>组件内容</p>
            <!-- 插槽预留位置 -->
            <!-- 插槽可以预留指定的值 -->
            <slot>
                <p>预留内容,未定义时使用</p>
            </slot>
        </div>
    </template>

    <script>

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {},
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        });
    </script>

运行结果
在这里插入图片描述
2. 具名插槽的使用:在定义了多个插槽之后,我们需要将对应的内容插入到指定的组件中,但Vue并不知道我们要插入的具体时哪一个插槽,因此可以给插槽起名,在需要插入时,只要指定出对应的插槽名称即可:
示例代码

    <div id="app">
        <div>
            <cpn>
                <!-- 在这里设置slot属性,指定修改哪一个 -->
                <span slot="left">左边</span>
                <button slot="center">中间</button>
                <span slot="right">右边</span>
            </cpn>
        </div>
    </div>

    <template id="cpn">
        <div>
            <!-- 设置name属性,可以指定修改哪个 -->
            <slot name="left"><span>左边内容</span></slot>
            <slot name="center"><span>中间内容</span></slot>
            <slot name="right"><span>右边内容</span></slot>
        </div>
    </template>

    <script>

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {},
            components: {
                cpn: {
                    template: '#cpn'
                }
            }
        });
    </script>

运行结果
在这里插入图片描述
3.编译作用域:当我们在两个组件中定义了两个同名变量时,我们使用时究竟是使用哪一个呢?这里将涉及到了编译作用域的概念,与其他语言的作用域相同,我们在定义一个组件时,同时也定义了一些数据,那么在该组件中使用的数据默认使用的时该组件的数据,因为组件的编译作用域就在组件内部
示例代码

    <div id="app">
        <!-- isShow使用的是实例Vue的isShow -->
        <cpn v-show="isShow"></cpn>
    </div>
    <template id="cpn">
        <div>
            <h2>我是标题</h2>
            <p>我是内容</p>
            <button v-show="isShow">按钮</button>
        </div>
    </template>

    <script>

        const cpn = {
            template: '#cpn',
            data() {
                return {
                    isShow: false
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
                isShow: true
            },
            methods: {},
            components: {
                cpn
            }
        });
    </script>

运行结果
在这里插入图片描述
4. 作用域插槽的使用
**示例代码:**子组件进行展示自己的数据,并且父组件也要获取子组件的数据进行展示

    <div id="app">
        <cpn></cpn>

        <cpn>
            <!-- 目的:父组件获取子组件的数据进行另外的展示 -->
            <template slot-scope="slot">
                <!-- join函数,将数组转换成字符串,以-进行分割 -->
                <span>{{slot.data.join(' - ')}}</span>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <!-- 其中data的名称可以自取,保存的是books对象的数据 -->
        <div>
            <slot :data="books">
                <ul>
                    <li v-for="book in books">{{book}}</li>
                </ul>
            </slot>
        </div>
    </template>

    <script>

        const cpn = {
            template: '#cpn',
            data() {
                return {
                    books: ['三国演义', '水浒传', '红楼梦', '西游记'],
                }
            }
        }

        const app = new Vue({
            el: '#app',
            data: {
                message: 'Hello World',
            },
            methods: {},
            components: {
                cpn
            }
        });
    </script>

运行结果
在这里插入图片描述

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页