Vue组件化开发3

组件化--插槽的使用

插槽的基本使用

插槽的作用其实就像给组件内部留下一些位置，当需要的时候可以直接占用这些位置来放上自己需要的内容，可以插槽的存在极大地提高了组件的可扩展性。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn>
        <button>按钮</button>
    </cpn>
    <cpn><span>111</span></cpn>
    <cpn></cpn>
    <cpn></cpn>
    <cpn1>
        <div>dwffefwefwefew</div>
    </cpn1>
</div>
<template id="cpn">
    <div>
        <h2>组件</h2>
        <p>组件222</p>
        <slot></slot>
        <!--<button>按钮</button>-->
    </div>
</template>
<template id="cpn1">
    <div>
        <h2>aaaa</h2>
        <p>aaaaaa</p>
        <!--<button>按钮</button>-->
    </div>
</template>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message: '你好'
        },
        components: {
            cpn: {
                template: '#cpn'
            },
            cpn1: {
                template: '#cpn1'
            }
        }
    })
</script>
</body>
</html>

上面的代码中我们可以看到在id为cpn的组件中定义了一个slot插槽，然后往vue实例中注册cpn组件，并且加入了4个cpn组件，其中的两个组件中吗，一个添加了buttton标签，一个添加了span标签，slot插槽的作用就是在组件中保留了一个位置可以添加额外的内容，cpn1组件因为没有添加插槽，所以其中的

dwffefwefwefew
不会在页面显示出来。

具名插槽的使用

具名插槽感觉就像给插槽标了一个名称，让组件中新添加的内容能够根据根据插槽的名称找到自己在组件中的位置。其实slot插槽中也可以定义一些默认的内容，在没被使用的时候展示出来，一旦插槽被使用则覆盖掉插槽原本存在的内容。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <cpn>
        <span slot="center">标题</span>
        <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 src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data:{
            message: '你好'
        },
        components: {
            cpn: {
                template: '#cpn'
            }
        }
    })
</script>
</body>
</html>

代码中定义了一个cpn组价，该组件里面定义了三个插槽，分别命名为left、center和right，并且每一个插槽中都定义了一个span标签以及不同的文本内容，然后在vue实例中引用了该组件，并且向组件中添加了span和button两个元素，元素的slot属性分别是center和left，然后在浏览器中运行代码我们可以看到名为center和left的两个slot插槽中的元素已经被替换为新加入的内容，而名为right的slot插槽中的内容则正常显示。

以上为个人见解，如有错误的地方，麻烦提醒下，万分感谢。

posted @ 2021-01-28 16:17  lamsacule  阅读(34)  评论(0)    收藏  举报