Vue插槽用法

最新推荐文章于 2024-06-21 09:55:16 发布

Kikyo--

最新推荐文章于 2024-06-21 09:55:16 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/weixin_55803498/article/details/116534005

版权

slot插槽基本用法
使用slot插槽后可以使得组件在调用后可以进行修改

<body>
    <div id="app">
        <cpn></cpn>
        <cpn><span>无按钮</span></cpn>
        //向组件中加入新的元素时会覆盖原有的默认值，若有多个元素会一起替换
    </div>
    <template id="cpn">
        <div>
            <h2>子组件</h2>
            <slot><button>按钮</button></slot>
            //设置插槽的默认值为一个button按钮
        </div>
    </template>
</body>
<script src="../Vue/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return {

                    }
                },
            }
        }
    })
</script>

在这里插入图片描述
具名插槽的使用
当有多个插槽，想修改其中一个插槽的值时使用具名插槽

<body>
    <div id="app">
        <cpn></cpn>
        <cpn><span slot="center">主题</span></cpn>
        //在替换的元素中写入插槽对应的名字
    </div>
    <template id="cpn">
        <div>
            <slot name="left">标题</slot>
            <slot name="center">内容</slot>
            <slot name="right">信息</slot>
            //给插槽命名
        </div>
    </template>
</body>
<script src="../Vue/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return {

                    }
                },
            }
        }
    })
</script>

在这里插入图片描述
作用域插槽
在父组件中改变子组件的内容显示方式使用作用域插槽。在下例中数组的作用域位于子组件中，要想在父组件中改变显示方式就使用作用于插槽。

<body>
    <div id="app">
        <cpn></cpn>
        <cpn>
            <template slot-scope="solt">
            //新版本的Vue可以用div代换template,slot-scop后的名称可以更换
                <div>
                    // <span v-for="item in solt.data">{{item}}-</span>
                    //在元素后加上-
                    <span>{{solt.data.join(' | ')}}</span>
                    //join方法可以在内容中间插入对应值
                </div>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <slot :data="pLanguages">
            //向插槽中传入数组值，data可更换名称
                <ul>
                    <li v-for="item in pLanguages">{{item}}</li>
                </ul>
            </slot>
        </div>
    </template>
</body>
<script src="../Vue/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            message: "hello"
        },
        components: {
            cpn: {
                template: "#cpn",
                data() {
                    return {
                        pLanguages: ['php', 'java', 'c', 'c++', 'pathon']
                    }
                },
            }
        }
    })
</script>

在这里插入图片描述

Kikyo--

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽用法

slot插槽基本用法使用slot插槽后可以使得组件在调用后可以进行修改<body> <div id="app"> <cpn></cpn> <cpn><span>无按钮</span></cpn> //向组件中加入新的元素时会覆盖原有的默认值，若有多个元素会一起替换 </div> <template id="cpn">
复制链接

扫一扫