vue----04

1、父组件如何向子组件传递数据

<div id="root">
   <counter :count="0"></counter>
   <counter :count="1"></counter>
   
</div>

<script>
    var counter = {
        props: ['count'],
        template:'<div @click="handleClick">{{count}}</div>',
        data: function() {
            return {
                number : this.count
            }
        },
        methods: {
            handleClick: function() {
                this.number++
            }
        }
    }

    var vm  = new Vue({
        el:"#root",
        data: {
          total: 0  
        },
        components: {
            counter:counter 
        },
        
    })
</script>

2、子组件向父组件传值

<div id="root">
   <counter :count="0" @change="handleChange"></counter>
   <counter :count="1" @change="handleChange"></counter>
   <div>{{total}}</div>
</div>

<script>
    var counter = {
        props: ['count'],
        template:'<div @click="handleClick">{{count}}</div>',
        data: function() {
            return {
                number : this.count
                //父子组件传值有单向数据流的规定，不可以直接改变父组件传过来的值
            }
        },
        methods: {
            handleClick: function() {
                this.number++;
                this.$emit('change',1)
            }
        }
    }

    var vm  = new Vue({
        el:"#root",
        data: {
            total: 0  
        },
        components: {
            counter:counter 
        },
        methods: { 
           handleChange: function(step) {//step指步长
                // this.total = this.$refs.one.number + this.$refs.two.number;
                this.total += step
                
           }
        }
    })
</script>