Vue 父组件子组件传值 - 木子才的博客

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <counter :count="1"></counter>
            <counter :count="2"></counter>
        </div>
        
        <script>
            var counter = {
                props: ['count'],
                template: '<div>{{count}}</div>'
            }
            
            var vm = new Vue({
                el: '#app',
                components: {
                    counter: counter,
                },
            })
        </script>
    </body>
</html>

父组件给子组件传值都是通过属性赋值方式进行的。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <counter :count="1"></counter>
            <counter :count="2"></counter>
        </div>
        
        <script>
            var counter = {
                props: ['count'],
                data: function() {
                    return {
                        number: this.count,
                    }
                },
                template: '<div @click="handleClick">{{number}}</div>',
                methods: {
                    handleClick: function() {
                        // this.$emit(this.number + 1)
                        this.number++
                    },
                },
            }
            
            var vm = new Vue({
                el: '#app',
                components: {
                    counter: counter,
                },
            })
        </script>
    </body>
</html>

子组件里面，不能直接修改父组件传过来的对象，最好copy一份，然后在copy的基础上修改。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="./vue.v2.6.10.dev.js"></script>
    </head>
    <body>
        <div id="app">
            <counter :count="0" @change="handleChange"></counter>
            <counter :count="0" @change="handleChange"></counter>
            <div>{{total}}</div>
        </div>
        
        <script>
            var counter = {
                props: ['count'],
                data: function() {
                    return {
                        number: this.count,
                    }
                },
                template: '<div @click="handleClick">{{number}}</div>',
                methods: {
                    handleClick: function() {
                        // this.$emit(this.number + 1)
                        this.number++
                        this.$emit('change', 1)
                    },
                },
            }
            
            var vm = new Vue({
                el: '#app',
                data: {
                    total: 0,
                },
                components: {
                    counter: counter,
                },
                methods: {
                    handleChange: function(value) {
                        this.total += value
                    },
                }
            })
        </script>
    </body>
</html>