前端小白入门Vue之组件的插槽slot

---

前言

在Vue中组件作为非常重要的思想理念，组件具有非常强的扩展性和复用性，这一篇我们一起来学习组件的插槽slot

---

一、slot如何使用？

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

    <div id="app">
        <cpn></cpn>
        <cpn><button>我是新的按钮</button></cpn>
        <cpn>
            <div>
                <h2>我是新的内容</h2>
                <button>我是新的按钮</button>
            </div>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>我是组件</h1>
            <!-- 在组件中定义插槽 -->
            <slot><button>如果插槽中没有值，就会显示默认值</button></slot>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
            components: {
                'cpn': {
                    template: '#cpn'
                }
            }
        })
    </script>

运行结果如下：

二、具名插槽的使用

1.给每个插槽起名字，这样按照需要修改每个插槽

    <div id="app">
        <cpn>
            <h1 slot="center">标题</h1>
            <button slot="left">按钮</button>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <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"
            },
            components: {
                'cpn': {
                    template: '#cpn'
                }
            }
        })
    </script>

运行结果如下：

三、编译作用域补充

组件被挂载在那个实例下面，其编译作用域就会在实例下面。
代码如下（示例）：

四、作用域插槽

1.父组件替换插槽的标签，但是内容由子组件来提供。

    <div id="app">
        <cpn></cpn>
        <cpn>
            <template slot-scope="slot">
                <span>{{slot.data.join(' - ')}}</span>
            </template>
        </cpn>
        <cpn>
            <template slot-scope="slot">
                <span>{{slot.data.join(' * ')}}</span>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot :data="pLanguages">
                <ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
            components: {
                'cpn': {
                    template: '#cpn',
                    data() {
                        return {
                            pLanguages: ['JavaScript', 'Python', 'C++', 'Java', 'C', 'Go']
                        }
                    }
                }
            }
        })
    </script>

---

总结

这次我们学习了如何使用插槽slot,多加联系，才能更好的掌握

今日推荐

开发：开发者解决BUG的好地方