Vue学习笔记（十）之父子组件通信

单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

父组件向子组件传值

父组件向子组件传值是通过属性的绑定，子组件通过props接收父组件传过来的值，但并不能直接进行修改。
效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <counter :count="0"></counter>
        <counter :count="1"></counter>
        <!--父组件向子组件传值通过属性的绑定，count加:传递的值是number，不加就是字符串-->
    </div>

    <script>
        var counter = {
            props: ['count'],
            template: '<div @click="handleClick">{{count}}</div>',
            methods: {
                handleClick: function() {
                    this.count ++
                }
            }
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter
            }
        })
    </script>
</body>
</html>

上述代码是直接修改传过来的count，count只是一个number，如果他是一个引用类型的数据，你直接修改可能在其他也在用count的组件会收到影响，为了避免这个情况，我们可以创建一个副本数据，修改副本数据，不会影响其他组件，而且也能到达目的。
效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <counter :count="0"></counter>
        <counter :count="1"></counter>
    </div>

    <script>
        var counter = {
            props: ['count'],
            data : function () {
                return {
                    number: this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function() {
                    this.number ++
                }
            }
        // 子组件向父组件传递的数据流是单向的，不能直接修改值，假设传递的值是对象这种引用类型，
        // 那么修改会影响到其他复用的组件,所以我们需要一个副本，用number直接替代
        }
        var vm = new Vue({
            el: '#root',
            components: {
                counter: counter
            }
        })
    </script>
</body>
</html>

子组件向父组件传值

子组件通过事件触发事件向父组件传值

效果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
    <script src="http://vuejs.org/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <counter :count="2" @change="handleIncrease"></counter>
        <counter :count="3" @change="handleIncrease"></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.number = this.number + 2
                    this.$emit('change', 2)
                }
            }
        }
        var vm = new Vue({
            el: '#root',
            data: {
                total: 5
            },
            components: {
                counter: counter
            },
            methods: {
                handleIncrease: function(step) {
                    this.total += step
                }
            }
        })
    </script>
</body>
</html>

单向数据流

父组件向子组件传值

子组件向父组件传值

FEATURED TAGS

FRIENDS