父子组件间的数据传递

发布时间：2020-06-29 20:38:05 作者：梁十八
来源：网络阅读：135

vue当中有个单向数据流的概念，也就是：父组件可以向子组件传递/修改参数(通过属性的方式传)，但子组件不可以反过来修改父组件传递过来的参数！（因为怕子组件改了父组件引用类型的数据，可能会影响到其他组件）。那怎样解决这个问题？可以复制给子组件自己的变量，然后子组件修改自己的变量啊！
这是父组件向子组件传递数据：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    //加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br>
    <counter :count="1"></counter>
    <counter :count="2"></counter>
</div>
<script type="text/javascript">
    //父组件是通过属性的方式向子组件传递数据的

    //局部组件，需要注册
    var counter = {
        props: ["count"], //子组件接收父组件传过来的内容
        data: function() {
            return {
                number: this.count //从父组件接收count数据，复制到子组件自己data的变量number里
            }
        },
        /*template: "<div @click='handleClick'>{{count}}</div>",*/

        //既然子组件不应该修改父组件传过来的值，那就修改自己的咯
        template: "<div @click='handleClick'>{{number}}</div>",
        methods: {
            handleClick: function() {
                /*//这种方式虽然可以实现，但会警告：不要直接修改父组件传递过来的属性!
                this.count++ */

                //所以给子组件自己的number++，而不是父组件的count++
                this.number++
            }
        }
    }
    var vm = new Vue({
        el: "#root",
        components: {
            counter: counter
        }
    })
</script>
</body>
</html>

子组件向父组件传递数据：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="./vue.js"></script>
    <!-- <script src="http://cdn.staticfile.org/vue/2.6.10/vue.common.dev.js"></script> -->
</head>
<body>
<div id="root">
    //加了:后引号里的内容就不是字符串了，而是js表达式，所以，就是数字类型了 <br>
    //这个模版属于根组件，所以handleInc方法也要写在根组件 <br>
    <counter :count="3" @change="handleInc"></counter>
    <counter :count="2" @change="handleInc"></counter>
    <div>{{total}}</div>
</div>
<script type="text/javascript">
    //父组件是通过属性的方式向子组件传递数据的

    //局部组件，需要注册
    var counter = {
        props: ["count"], 
        data: function() {
            return {
                number: this.count 
            }
        },

        //既然子组件不应该修改父组件传过来的值，那就修改自己的咯
        template: "<div @click='handleClick'>{{number}}</div>",
        methods: {
            handleClick: function() {
                this.number++
                //点击子组件，触发change事件，告诉父组件，自己增加了1（可以自己命名事件，不一定要是change）
                this.$emit("change", 1)
            }
        }
    }
    var vm = new Vue({
        el: "#root",
        components: {
            counter: counter
        },
        data: {
            total: 5
        },
        methods: {
            //接收到子组件中的参数step(这里是this.$emit("change", 1)中的1)，参数可以随意命名的，不一定要叫step
            handleInc: function(step) { 
                this.total += step
            }
        }
    })
</script>
</body>
</html>

父子组件间的数据传递

相关阅读