vue 组件中solt 插槽使用

2023-12-25 00:09•linux•阅读 2286

官方教程: https://cn.vuejs.org/v2/guide/

vue solt 插槽使用

如果现在事先模板中不知道需要什么内容,需要在使用时传递
就可以使用插槽with来实现,这种效果! 类似ThinkPHP中的模板继承
的block 标签的功能

匿名插槽

顾名思义就是没有名字的插槽, 匿名插槽只能有一个

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>vue study</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div >
    <my-comp>
        <slot> <p> 这是使用了插槽,如果没有插槽,这里的内容不会显示 </p> </slot>
    </my-comp>
</div>

<!--templates-->
<template >
    <div>
        <p>其他内容</p>
        <slot> <span>匿名插槽 -- 默认内容</span> </slot>
        <p>其他内容</p>
    </div>
</template>

<!-- JavaScript -->
<script>
    // Register Vue Component
    let myComp = Vue.extend({
        template: '#my',
    });
    
    const vm = new Vue({
        el: '#app',
        data: {

        },
        components: {
            "my-comp": myComp,
        },
    });
</script>
</body>
</html>

实名插槽

实名插槽可以有多个,在使用时必须使用name属性来标识

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>vue study</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>

<div >
<!--
    注意: 这里放的内容都是属于父级的, 所以 @click="fn" 这个fn方
    法加在组件中是没有用的,必须加在 vm 这个实例中
-->
    <my-comp>
        <div slot="content">
            这是在使用时传入的内容...
            <a href="" @click="fn"></a>
        </div>
    </my-comp>
</div>

<!--templates-->
<template >
    <div>
        <slot name="title">default title</slot>
        <slot name="content">default content</slot>
    </div>
</template>

<!-- JavaScript -->
<script>
    // Register Vue Component
    let myComp = Vue.extend({
        template: '#my',
    });

    const vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            fn () {
                alert("hello");
            }
        },
        components: {
            "my-comp": myComp,
        },
    });

</script>
</body>
</html>

插槽可以设置默认值,定义了不使用就会使用默认值,
如果没有名字的标签的标签默认会放到default(即匿名插槽)

上一篇 »vue的插槽
下一篇 »046——VUE中组件之使用动态组件灵活设置页面布局