【Vue 开发实战】基础篇 # 4：Vue组件的核心概念：插槽

说明

【Vue 开发实战】学习笔记。

插槽

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将元素作为承载分发内容的出口。

在这里插入图片描述

匿名插槽

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件的核心概念：插槽title>
head>
<body>
    <div id="app">
        {{message}}

        <todo-list>
            <todo-item v-for="item in list" :title="item.title" :del="item.del" @delete="handleDelete">todo-item>
        todo-list>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        // 定义一个名为 todo-item 的组件；名字需要唯一
        Vue.component("todo-item", {
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false
                }
            },
            template: `
                
                    {{title}}
                    {{title}}
                    
                
            `,
            // data 需要为函数返回一个对象，保证唯一性
            data: function() {
                return {}
            },
            methods: {
                handleClick() {
                    console.log('点击了删除按钮');
                    // 发射时间出去
                    this.$emit("delete", this.title);
                }
            },
        });
        // 定义一个名为 todo-list 的组件
        Vue.component("todo-list", {
            template: `
                
            `,
        });

        var vm = new Vue({
            el: "#app",
            data: {
                message: "kaimo 313",
                list: [
                    {
                        title: "课程1",
                        del: true
                    },{
                        title: "课程2",
                        del: false
                    },
                ]
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete---->', val);
                }
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

在这里插入图片描述

具名插槽

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件的核心概念：插槽title>
head>
<body>
    <div id="app">
        {{message}}

        <todo-list>
            <todo-item v-for="item in list" :title="item.title" :del="item.del" @delete="handleDelete">
                <span slot="pre-icon">前置iconspan>
                
                <template v-slot:suf-icon>后置icontemplate>
            todo-item>
        todo-list>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        // 定义一个名为 todo-item 的组件；名字需要唯一
        Vue.component("todo-item", {
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false
                }
            },
            template: `
                
                    
                    {{title}}
                    {{title}}
                    没有使用，默认文字展示
                    
                
            `,
            // data 需要为函数返回一个对象，保证唯一性
            data: function() {
                return {}
            },
            methods: {
                handleClick() {
                    console.log('点击了删除按钮');
                    // 发射时间出去
                    this.$emit("delete", this.title);
                }
            },
        });
        // 定义一个名为 todo-list 的组件
        Vue.component("todo-list", {
            template: `
                
            `,
        });

        var vm = new Vue({
            el: "#app",
            data: {
                message: "kaimo 313",
                list: [
                    {
                        title: "课程1",
                        del: true
                    },{
                        title: "课程2",
                        del: false
                    },
                ]
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete---->', val);
                }
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83

在这里插入图片描述

不使用后置 icon 插槽

在这里插入图片描述
就会展示默认的东西

作用域插槽

接收子组件传递的值，本质上就是传递是返回组件的函数

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件的核心概念：插槽title>
head>
<body>
    <div id="app">
        {{message}}

        <todo-list>
            <todo-item v-for="item in list" :title="item.title" :del="item.del" @delete="handleDelete">
                <span slot="pre-icon">前置iconspan>
                
                <template v-slot:suf-icon="{value}">后置icon：{{value}}template>
            todo-item>
        todo-list>
    div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
    <script>
        // 定义一个名为 todo-item 的组件；名字需要唯一
        Vue.component("todo-item", {
            props: {
                title: String,
                del: {
                    type: Boolean,
                    default: false
                }
            },
            template: `
                
                    
                    {{title}}
                    {{title}}
                    没有使用，默认文字展示
                    
                
            `,
            // data 需要为函数返回一个对象，保证唯一性
            data: function() {
                return {
                    value: Math.random()
                }
            },
            methods: {
                handleClick() {
                    console.log('点击了删除按钮');
                    // 发射时间出去
                    this.$emit("delete", this.title);
                }
            },
        });
        // 定义一个名为 todo-list 的组件
        Vue.component("todo-list", {
            template: `
                
            `,
        });

        var vm = new Vue({
            el: "#app",
            data: {
                message: "kaimo 313",
                list: [
                    {
                        title: "课程1",
                        del: true
                    },{
                        title: "课程2",
                        del: false
                    },
                ]
            },
            methods: {
                handleDelete(val) {
                    console.log('handleDelete---->', val);
                }
            }
        })
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

在这里插入图片描述

相关阅读:
Python Faker批量生成测试数据
 sqlmap tamper脚本编写
 [BJDCTF2020]EzPHP
JAVA 学习笔记 2年经验
 React 全栈体系（十六）
Tomcat的安装与优化
 2022年牛客多校第四场补题
 c++期末复习题
 SpringBoot MongoDB操作封装
 测试经验总结
原文地址：https://blog.csdn.net/kaimo313/article/details/126697029