4-2#去哪儿网app#父子组件传递

在之前的第二章中，提及了父子组件传递的内容，本文用counter计数器小程序来进一步理解传递过程。

关键词：props、this.$(emit)

有几个小细节在注释中提到了，由于重要性较低，正文里不列出。

<div id="root">
    <counter :count="0" @change="handleChange"></counter>
    <!-- count前面加冒号，则后面的是js表达式，即数字0，否则为字符串0 -->
    <counter :count="1" @change="handleChange"></counter>
    <div>{{total}}</div>
</div>

 

<!-- 这次用局部组件 -->
<script>
    var counter = {
        // 父组件传递给子组件通过props
        props: ['count'],
        data: function() {
            return {
                number: this.count
            }
        },
        template: '<div @click="handleClick">{{number}}</div>',
        methods: {
            handleClick: function() {
                // this.count++;
                // 这样写会报错，不要修改父组件传递来的参数，只能用，这就叫单向数据流。所以定义一下data,就可以了
                this.number += 2;
                this.$emit('change', 2);
                // 这两个2对应就行，如果每次加一，emit中可以省略参数
            }
        }
    }
    var vm = new Vue({
        el: "#root",
        data: {
            total: 1
        },
        // 在父组件中是用局部组件，必须先注册，然后可以在父模板中使用counter，即V层。注册如下：
        components: {
            counter: counter
        },
        methods: {
            handleChange: function(step) {
                this.total += step //step在这里==2
            }
        }
    })
</script>

网页中的效果：

click多次后：