怎样给vue子组件穿动态的值，并实时显示出来？

Question

HTML：<statictics v-bind:num='getNum()'></statictics> //调用组件

JS：
` Vue.component('statictics',{ //组件

        template:'<footer>今天已完成{{statistics}}个任务</footer>',
        data:function() {
            return {
                statistics:this.num
            };
        },
        props:['num']
    });`

new Vue({//实例
    ...
    data:{
        items:[
        {id:1,text:'学习Vue',isFinished:false,isDelete:false},
        {id:2,text:'跑步',isFinished:false,isDelete:false}]
        ...
    },
    methods:{
                getNum:function() { //获取num
                    var i=0;
                    this.items.forEach(function(item) {
                        if(item.isFinished){
                            i++;
                        }
                    });
                    //console.log('==='+i);
                    return i;
                }
})

Answer 1

动态props
https://cn.vuejs.org/v2/guide...动态-Props

Answer 2

把这个 method 改为 computed 计算属性就可以了

参考官方文档关于计算属性的说明