计算属性

目的：将不经常变化的计算结果缓存起来，节约开销

使用

<div id="app-1">{{num}} ,{{test}}</div> 
                <!--1 , 2-->

<script>
    var vm=new Vue({
        el:"#app-1",
        data:{num:1},
        //计算属性
        computed:{
        //声明属性名为test,function为计算式
            test:function (){
                return this.num+1;
            }
        }
    });
</script>

Vue提供的函数将用作 property vm.test 的 getter 函数

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值

意味着只要 num 还没有发生改变，多次访问 test 计算属性会立即返回之前的计算结果，而不必再次执行函数。

插槽slot

作为承载分发内容的出口。

顾名思义使用slot的地方会作为一个插槽，方便其他内容的添加

使用

Vue.component("todo2",{
        template: '<li>\n' +
            '    <slot></slot>\n' +
            '</li>'
    })

<todo2>hello2</todo2>

结果：

进阶

<script>
    Vue.component("todo",{
        template: '<div>\
                        <slot name="slot1"></slot>\
                    <ul>\
                    <slot name="slot2"></slot>\
                     </ul>\
                 </div>'
    })
    Vue.component("todo-title",{
        props:['title'],
        template: "<div>{{title}}</div>"
    })
    Vue.component("todo-items",{
        props:['item'],
        template: "<li>{{item}}</li>>"
    })
    var app2=new Vue({
        el:"#app-2",
       // props:['title','todoItems'],
        data: {todoItems:[1,2,3],
                title:"Hello"}
    });

</script>

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

结果：

![~RPIT_SN 6F@FRB~O2JZ}92.png

自定义事件

涉及：组件如何调用vue对象的方法，传参

首先自定义一个组件

             //组件名todo-items
 Vue.component("todo-items",{
        //组件属性
        props:['todo_item','todo_index'],
        //组件包含的html代码 @click绑定点击事件
        template: "<li>{{todo_item}}<button @click='todo_remove'>delete</button></li>",
        //自定义方法todo_remove
        methods:{
            todo_remove:function (todo_index) {
                
            }
        }
    })

实例化Vue对象

var app3=new Vue({
        //绑定对象
        el:"#app-3",
        //定义数据
        data: {todoItems:[1,2,3],
            title:"Hello"},
        //自定义数据用于删除
        methods: {
            app3_remove:function (index) {
                console.log("delete"+this.todoItems[index]+"ok");
                //从第index个开始删除1个
                this.todoItems.splice(index,1);
            }
        }
    });

html

<div id="app-3">
    <todo>
                               //遍历获取下标ix和对象i         赋值组件属性item
        <todo-items slot="slot2" v-for="(i,ix) in todoItems" v-bind:todo_item="i"     
                    v-bind:todo_index="ix" v-on:todo_remove="app3_remove(ix)"></todo-items>
    </todo>
</div>
//赋值属性todo_index为ix  
//定义属性名为todo_remove的方法绑定实例对象的方法app3_remove(ix) 并传参ix

通过this.$emit("方法名",参数)调用Vue 对象app3的方法

Vue.component("todo-items",{
        props:['todo_item','todo_index'],
        template: "<li>{{todo_item}}<button @click='todo_remove'>delete</button></li>",
        methods:{
            todo_remove:function (todo_index) {
                console.log("start delete---"+todo_index+"----")
                this.$emit("todo_remove",todo_index);
            }
        }
    })