Vue：6.计算属性、内容分发、自定义事件

2020-03-21 阅读量

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

什么是计算属性

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

上代码：

<!--1.写div标签-->
<div id="app">
    <!--3.取值（注意，一个是方法，一个是属性）-->
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>

<script>
    //2.绑定标签并写内容
    var vm = new Vue({
        el: "#app",
        data: {
            message: "Hello"
        },
        methods: {
            currentTime1: function () {
                return Date.now(); //返回一个事件戳
            }
        },
        computed: {  //computed:计算属性
            //currentTime2 ，这是一个属性！不是方法
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>

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

说明：

methods：定义方法，调用方法使用 currentTime1()，需要带括号
computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新！可以在控制台输入 vm.message="123",会发现currentTime2值刷新了.（当函数中的数据改变，函数被重新调用）

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

内容分发(难理解)

在 Vue.js 中我们使用元素作为承载分发内容的出口，称其为插槽（slot），可以应用在组合组件的场景中（即复用场景中）;

测试

目标: 做到以下效果

<div id="vue">
    <p>列表书籍</p>
    <ul>
        <li>JAVA</li>
        <li>Linux</li>
        <li>Python</li>
    </ul>
</div>

第一步: 定义一个书籍的组件：通过拼接方式完成上述操作

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

<script type="text/javascript">
    Vue.component('todo', {
        template: '<div>\
                      <div>列表书籍</div>\
                      <ul>\
                          <li>JAVA</li>\
                          <li>Linux</li>\
                          <li>Python</li>\
                      </ul>\
                   </div>'
    });
</script>

第二步: 要让书籍的标题和值实现动态绑定,怎么做呢? 我们可以留出一个插槽!

1-修改上面的代码，留出以下两个个插槽,即 slot

//slot:插槽 name：要绑定的组件
Vue.component('todo', {
    template: '<div>\
                  <slot name="todo-title"></slot>\
                  <ul>\
                      <slot name="todo-items"></slot>\
                  </ul>\
               </div>'
});

2-编写上面代码需要的组件： todo-title (标题组件) 和 todo-items (内容组件)

Vue.component("todo-title", {
    props: ['title'],  // 用来接收数据，将数据绑定到{{title}}
    template: '<div>{{title}}</div>'
});
Vue.component("todo-items", {
    props: ['item'],
    template: '<li>{{item}}</li>'
});

3-实例化 Vue 并初始化数据

var vm = new Vue({
    el: "#vue",
    data: {
        title2: "列表书籍",
        todoItems2: ['JAVA', 'Linux', 'Python']
    }
});

4-将这些值,通过插槽插入

<div id="vue">
    <todo>
        <!--slot:插槽名，给该插槽里哪个位置放什么数据 v-bind:绑定-->
        <todo-title slot="todo-title" v-bind:title="title2"></todo-title>
        <todo-items slot="todo-items" v-for="item2 in todoItems2" v-bind:item="item2">           </todo-items>
    </todo>
</div>

说明:我们的 todo-title 和 todo-items 组件分别被分发到了 todo 组件的 todo-title 和 todo-items 插槽中

5-全部代码

<body>
<div id="vue">
    <todo>
        <!--slot:插槽名，给该插槽里哪个位置放什么数据 v-bind:绑定-->
        <todo-title slot="todo-title" v-bind:title="title2"></todo-title>
        <todo-items slot="todo-items" v-for="item2 in todoItems2" v-bind:item="item2"></todo-items>
    </todo>
</div>

<script>
    //slot:插槽 name：要绑定的组件
    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'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#vue",
        data: {
            title2: "列表书籍",
            todoItems2: ['JAVA', 'Linux', 'Python']
        }
    });
</script>

自定义事件（难理解）

目标
图加载中...

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

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

var vm = new Vue({
    el: "#vue",
    data: {
        title2: "列表书籍",
        todoItems2: ['JAVA', 'Linux', 'Python']
    },
    methods: {
        // 该方法可以被模板中自定义事件触发
        removeItems: function (index1) {
            //splice():js数组的方法
            //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，
            //其中 index 为添加/删除项目的位置，1 表示删除的数量
            this.todoItems2.splice(index1, 1);
        }
    }
});

2-修改 todo-items 组件的代码,增加一个删除按钮,并且绑定事件!

Vue.component("todo-items", {
    props: ['item','index'],  //获取索引，用于删除

    template: '<li>{{item}}<button @click="remove">删除</button></li>',

    methods: {
        remove: function (index3) {
            // $emit:自定义事件分发
            // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
            this.$emit("remove2", index3)
        }
    }
});

3-修改 todo-items 组件的 HTML 代码,增加一个自定义事件,比如叫 remove2,可以和组件的方法绑定,然后绑定到vue的方法中!

<!--增加了 v-on:remove2="removeTodoItems(index)" 自定义事件，该事件会调用 
Vue 实例中定义的名为removeTodoItems 的方法-->
<todo>
    <!--slot:插槽名，给该插槽里哪个位置放什么数据 v-bind:绑定-->
    <todo-title slot="todo-title" v-bind:title="title2"></todo-title>
    <!--删除元素，需要获取索引-->
    <todo-items slot="todo-items" v-for="(item2, index2) in todoItems2"
                v-bind:item="item2" v-bind:index="index2"
                v-on:remove2="removeItems(index2)" v-bind:key="index2"></todo-items>
</todo>