VUE笔记四计算属性、插槽、自定义事件

jenrain

已于 2022-03-28 22:16:01 修改

阅读量414

点赞数 1

分类专栏： vue 文章标签： vue

于 2021-11-23 22:23:14 首次发布

本文链接：https://blog.csdn.net/qq_49723651/article/details/121503974

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

本文详细介绍了Vue.js中的计算属性、插槽和自定义事件。计算属性用于缓存计算结果，减少不必要的计算开销；插槽允许在组件中分发内容，实现内容的灵活布局；自定义事件则实现了组件间的通信，确保数据的正确传递。通过示例代码，深入理解这些关键概念，提升Vue.js开发技能。

摘要由CSDN通过智能技术生成

计算属性、内容分发、自定义事件

计算属性computed

computed

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

下面直接看代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性 computed</title>
</head>
<body>
    <div id="app">
        <p>currentTime1: {{currentTime1()}}</p>
        <p>currentTime2: {{currentTime2}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                message: "hello, vue!",
            },
            methods: {
                currentTime1: function () {
                    return Date.now();  //返回一个时间戳
                }
            },
            //computed是一种属性而不是方法
            //优点是会把计算结果缓存起来，如果结果不经常变化，那么就直接加载，不进行计算
            computed: {   //不能和methods中的方法同名，不然会优先调用methods中的方法
                currentTime2: function () {
                    return Date.now();
                }
            }
        });
    </script>
</body>
</html>

注意：

methods和computed里的东西不能重名。

说明:

methods：定义方法，调用方法使用currentTime1()，需要带括号。
computed：定义计算属性，调用属性使用currentTime2，
不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化。
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”q in jiang"，
改变下数据的值，再次测试观察效果!

结论:

调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

插槽slot

slot
插槽

在Vue.js中我们使用<slot>元素作为承载分发内容的出口，官方称其为插槽，可以应用在组合组件的场景中。

插槽的使用

我们首先声明一个组件：

<body>
    <div class="app">
        <child-component>
            world
        </child-component>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        Vue.component("child-component", {
            template: '<div> \
                        hello \
                        </div>'
        });
        var vm = new Vue({
            el: ".app",
        });
    </script>
</body>

在这里插入图片描述

这个时候浏览器只能显示出一个hello，child-component标签中的内容是不能显示出来的。

现在给组件增加一个<slot></slot>插槽:

 Vue.component("child-component", {
            template: '<div> \
                        hello    \
                        <slot></slot> \
                        </div>'
        });

在这里插入图片描述

可以发现现在child-component标签中的内容就可以被显示出来了，这就是插槽的作用。

具名插槽

现在我们为插槽取一个名字，让child-component标签中的内容与具名插槽对应：

<body>
    <div id="app">
        <child-component>
            <template slot="slot1">
                具名插槽1
            </template>
            <template slot="slot2">
                具名插槽2
            </template>
            <div>
                我是默认插槽
            </div>
        </child-component>
    </div>
    <script>
        Vue.component('child-component', {
            template: `
                <div>
                <h4>现在有两种插槽：</h4>
                <slot name="slot1"></slot>
                <slot name="slot2"></slot>
                <slot></slot>
                </div>
            `
        })
        let vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

在这里插入图片描述

测试

制作一个简单的登录界面，这个登录界面非常简单，三个label和三个对应的文本框，
其中标签和文本框是不同的组件，而且不同的标签，它们显示的内容是不同的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot 插槽</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <login v-for="item in elems">
            <mylabel slot="mylabel"  :elem="item"></mylabel>
            <myBox slot="mybox"></myBox>
        </login>
    </div>
    
    <script>
        Vue.component("login", {
            template: '<div>\
                        <slot name="mylabel"></slot>\
                        <slot name="mybox"></slot>\
                       </div>'
        });
        Vue.component("mylabel", {
            props: ['elem'],
            template: '<label>{{elem}}: </label>'
        });
        Vue.component("mybox", {
            template: '\
                <input type="text">\
                      '
        });
        var vm = new Vue({
            el: ".app",
            data: {
                elems: ["姓名", "年龄", "电话号码"],
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

自定义事件this.$emit()

自定义事件

通以上代码不难发现，数据项在Vue的实例中，但删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢?此时就涉及到参数传递与事件分发了， Vue为我们提供了自定义事件功能，很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’，参数) ，操作过程如下：

1.在vue的实例中增加了methods对象并定义了一个名为removeTodoltems的方法

var vm = new Vue({
        el:"#vue",
        data:{
            title_text:"秦老师系列课程",
            todoItems:['test1','test2','test3']
        },
        methods:{
            removeItems:function(index){
                console.log("删除了"+this.todoItems[index]+"OK");
                //splice（） 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中index
                this.todoItems.splice(index,1);
            }
        }
    });

2.修改todo-items待办内容组件的代码，增加一个删除按钮，并且绑定事件

 Vue.component("todo-items",{
        props:["item_p","index_p"],
        template:"<li>{{index_p+1}},{{item_p}} <button @click='remove'>删除</button></li>",
        methods:{
            remove:function (index) {
            //这里的remove是自定义事件名称，需要在HTML中使用v-on:remove的方式
                //this.$emit 自定义事件分发
                this.$emit('remove',index);
            }
        }
    });

3.修改todo-items待办内容组件的HTML代码，增加一个自定义事件，比如叫remove，可以和组件的方法绑定，然后绑定到vue的方法

<!--增加了v-on:remove="removeTodoItems(index)"自定义事件，该组件会调用Vue实例中定义的-->
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item_p="item" :index_p="index" v-on:remove="removeItems(index)" :key="index"></todo-items>

在上一个代码的基础上增加了删除功能:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义事件</title>
</head>
<body>
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in todoItems"
                    :item="item" :index="index"
                    @remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //注册一个vue组件
    //slot 标签用来定义插槽
    Vue.component("todo", {
        template: '<div>\
                            <slot name="todo-title"></slot>\
                            <ul>\
                                <slot name="todo-items"></slot>\
                            </ul>\
                        </div>'
    });
    Vue.component("todo-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-items", {
        props: ['item', 'index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}} --- {{item}} &nbsp <input type="button" @click="remove" value="删除"></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove', index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data: {
            title: "四大名著",
            todoItems: ['西游记', '水浒传', '红楼梦', '三国演义'],
        },
        methods: {
            removeItems: function (index) {
                this.todoItems.splice(index, 1) //一次删除一个元素
                console.log("删除" + this.todoItems[index] + " OK!")
            }
        },
    });
</script>
</body>
</html>

在这里插入图片描述

逻辑解释

在这里插入图片描述

入门小结

核心：数据驱动，组件化

优点：借鉴了AngularJS的模块化开发和React的虚拟Dom，虚拟Dom就是把Demo操作放到内存中执行；

常用的属性：

v-if
v-else-if
v-else
v-for
v-on绑定事件，简写@
v-model数据双向绑定
v-bind给组件绑定参数，简写：

组件化：

组合组件slot插槽
组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
计算属性的特色，缓存计算数据

遵循SoC关注度分离原则，Vue是纯粹的视图框架，并不包含，比如Ajax之类的通信功能，为了解决通信问题，我们需要使用Axios框架做异步通信。

VUE笔记列表

VUE笔记一基础语法指令
 VUE笔记二表单双绑、组件
 VUE笔记三 Axios异步通信
 VUE笔记四计算属性、内容分发、自定义事件
 VUE笔记五 vue-cli
VUE笔记六 webpack
VUE笔记七 vue-router
VUE笔记八实战快速上手

参考资料：
https://www.bilibili.com/video/BV18E411a7mC?from=search&seid=11393012814896649855&spm_id_from=333.337.0.0
https://blog.csdn.net/qq_46138160/article/details/111028492

jenrain

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
VUE笔记四计算属性、插槽、自定义事件

计算属性、内容分发、自定义事件文章目录计算属性、内容分发、自定义事件计算属性computed内容分发slot自定义事件this.$emit()入门小结VUE笔记列表计算属性computedcomputed计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!下面直接看代码:<!DOCTYPE html>&
复制链接

扫一扫