Vue-组件化

最新推荐文章于 2023-06-12 09:56:25 发布

张小驰出没

最新推荐文章于 2023-06-12 09:56:25 发布

阅读量150

点赞数

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

本文链接：https://blog.csdn.net/qq_43740362/article/details/116035239

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中计算属性与方法的区别，强调了计算属性的缓存特性，并通过示例展示了如何使用。此外，还探讨了Vue组件的插槽功能，说明了如何创建和使用具名插槽来组织复杂组件结构。最后，讲解了自定义事件的内容分发，演示了如何在组件间传递数据并实现删除功能。

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

Vue-组件化

计算属性

计算属性应该使用 computed 属性，他会把内部方法变为静态属性直接可以调用

一下使用 computed 与 methods 进行对比

<div id="vue" >
    <div>date1: {{date1()}} </div>
    <div>date_1: {{date1}}</div>
    <div>date2: {{date2}}</div>
<!--<div>date_2: {{date2()}}</div>-->
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue',
        methods: {
            date1: function(){
                return Date.now();
            }
        },
        computed: {
            date2: function (){
                return Date.now();
            }
        }
    });
</script>

注意：methods和computed里的东西不能重名

methods：定义方法，调用方法使用currentTime10），需要带括号，
computed：定义计算属性，调用属性使用currentTime2，不需要带括号；
如何在方法中的值发生了变化，则缓存就会刷新;

结论：

调用方法时，每次都需要进行计算，可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点

计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；

插槽

1.创建一个Vue的html文件模板

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

<div id="vue" >
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:'#vue'
    });
</script>
</body>
</html>

2.创建一个Vue组件

Vue.component("todo",{
    template: '<div>\
                    <slot></slot>\
                    <ul>\
                        <slot></slot>\
                    </ul>\
               </div>'
});

在这个名为 todo 的Vue组件中加入了两个插槽 <slot>

3.再创建两个Vue组件可以补充到插槽中

Vue.component("todo",{
template: '<div>\
    <slot name="todo-title"></slot>\
    <ul>\
        <slot name="todo-items"></slot>\
    </ul>\
</div>'
});
Vue.component("todo-title",{
});
Vue.component("todo-items",{
});

4.补充其余部分

var vm = new Vue({
    el:'#vue',
    data: {
        title: "我是一个title",
        todoItems: ['Java','Python','Linux','Nginx']
    }
});

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

Vue.component("todo-title",{
    props: ['title'],
    template: '<div>{{title}}</div>'
});
Vue.component("todo-items",{
    props: ['item'],
    template: '<li>{{item}}</li>'
});

自定义事件内容分发

1.修改html页面，增加删除按钮

<div id="vue" >
    <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"></todo-items>
    </todo>
</div>

Vue.component("todo-items",{
    props: ['item','index'],
    template: '<li>{{index}}---{{item}}--<button @click="remove">删除</button></li>',
    methods: {
        remove: function (){
        	alert("111");
        }
    }
});

增加了 数组索引 以及 删除按钮

一个Vue组件只能调用这个组件内的方法，但是这样做不到删除数组元素

所以应该使用 this.$emit(‘方法名’,index);

2.先在Vue中增加删除方法

methods: {
    removeItems: function (index) {
        alert("删除了"+this.todoItems[index]);
        this.todoItems.splice(index,1);  // 一次删除一个元素
    }
}

这个方法一次删除一个元素，即删除当前元素，删除之前会弹出删除的元素名

3.在Vue组件中进行方法绑定

<todo-items slot="todo-items" v-for="(item,index) in todoItems" 
            :item="item" :index="index" 
            v-on:remove="removeItems(index)"></todo-items>

Vue.component("todo-items",{
        props: ['item','index'],
        template: '<li>{{index}}---{{item}}--<button @click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                this.$emit('remove',index);
            }
        }
});

这时候再进入页面可以实现，点击按钮删除数组元素功能

个人博客为：
MoYu’s HomePage

张小驰出没

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Vue-组件化

Vue-组件化计算属性计算属性应该使用 computed 属性，他会把内部方法变为静态属性直接可以调用一下使用 computed 与 methods 进行对比<div id="vue" > <div>date1: {{date1()}} </div> <div>date_1: {{date1}}</div> <div>date2: {{date2}}</div><!--<div&
复制链接

扫一扫

专栏目录