父子组件间的数据传递

Posted 2022-04-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了父子组件间的数据传递相关的知识，希望对你有一定的参考价值。

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>

以上是关于父子组件间的数据传递的主要内容，如果未能解决你的问题，请参考以下文章