The road to the Vue（三）

最新推荐文章于 2023-05-23 22:27:49 发布

CSNZのBlog

最新推荐文章于 2023-05-23 22:27:49 发布

阅读量144

点赞数

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

本文链接：https://blog.csdn.net/csnz123123/article/details/118599346

版权

前端专栏专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的计算属性、插槽和自定义事件。计算属性用于缓存计算结果，减少不必要的计算开销；插槽则实现了内容分发，允许组件内部结构的定制；自定义事件则解决了组件间通信的问题，通过事件监听和触发实现数据交互。示例代码清晰地展示了这些概念的使用方法。

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

一：Vue的计算属性

啥是计算属性捏,就是一个能够将计算结果缓存起来的属性(将计算后的数据变成缓存)

废话少说直接上demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    通过方法返回Now:{{currentTime()}}<br>
    通过属性返回Now:{{currentTime2}}
</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"csnz"
        },
        methods:{
            currentTime:function () {
                return Date.now();//返回一个时间戳
            }
        },
        <!-- 如果方法 和 计算属性 重名 默认 使用方法-->
        computed:{
            currentTime2:function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

运行结果

在这里插入图片描述

说明：

methods：定义方法，调用方法使用currentTime() .需要带括号
computed：定义计算属性，调用属性使用 currentTime2 ，无需带括号，this.message为了让currentTime2检测到数据发生变化了而让自身发生变化
如果在方法中的值发生了变化，则缓存就会刷新，可以在控制台使用 vm.message = “CSNZ”,改变数据的值，再次打印currentTime2的值时会发生改变！

小Tips：

如果方法和计算属性重名默认使用方法( 方法优先级更高 )

结论：

在调用方法时，每次都要进行计算，必定产生系统开销，如果这个结果并不是经常变化的，那么我们就可以考虑使用缓存来减少系统开销，采用计算属性就可以很方便的做到这一点，计算属性的主要特性就是为了将不经常进行变化的数据进行缓存，以节约我们的系统开销
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

二：插槽 slot

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

1、准备好模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
    var vm = new Vue({
        el:"#app"
    });
</script>
</body>
</html>

2、编写好slot组件标签

// slot:插槽
Vue.component("todo",{
    template:'<div>' +
               '<slot name="todo-title">' +
                    '<ul>' +
                        '<slot name="todo-items"></slot>'+
                    '</ul>'+
               '</slot>'+
             '</div>'
});
Vue.component("todo-title",{
    props:['title'],
    template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
    props:['item'],
    template:'<li>{{item}}</li>'
});

3、在vm对象中存入数据

  var vm = new Vue({
        el:"#app",
        data:{
            title:"潮汕奴仔学习清单",
            todoItems:[
                '潮汕奴仔学Vue',
                '潮汕奴仔学Java',
                '潮汕奴仔学小程序'
            ]
        }
    });

4、编写View 视图层

<div id="app">
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</div>

合并：总的demo代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <todo-title slot="todo-title" v-bind:title="title"></todo-title>
    <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
</div>

<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
// slot:插槽
Vue.component("todo",{
    template:'<div>' +
               '<slot name="todo-title">' +
                    '<ul>' +
                        '<slot name="todo-items"></slot>'+
                    '</ul>'+
               '</slot>'+
             '</div>'
});
Vue.component("todo-title",{
    props:['title'],
    template:'<div>{{title}}</div>'
});
Vue.component("todo-items",{
    props:['item'],
    template:'<li>{{item}}</li>'
});
    var vm = new Vue({
        el:"#app",
        data:{
            title:"潮汕奴仔学习清单",
            todoItems:[
                '潮汕奴仔学Vue',
                '潮汕奴仔学Java',
                '潮汕奴仔学小程序'
            ]
        }
    });
</script>
</body>
</html>