vue20-父子组件传值

下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+1时，又把加的步长传给了父组件，在父组件中显示的总和。

<!DOCTYPE html>
<html lang=en>
    <head>
        <meta charset="utf-8"/>
        <title>Hello world</title>
        <script src="vue.js"></script>
    </head>
    <body>
        <div id="root">
            <counter :count="0" @change='handleIncrease'></counter>
            <counter :count="1" @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.count++ 
                        //单项数据流概念：子组件不要随意修改父组件传递的参数，只用就可以了，如果是引用类型，会影响外部组件
                        //如果一定要修改，修改副本

                        this.number++;
                        //通过事件触发的方式子组件向父组件传值
                        this.$emit('change',1); //发生改变，步长为1
                    }
                }
            }


            var vm = new Vue({
               el:"#root",
               data:{
                total:1
               },
               methods:{
                handleIncrease: function(step){
                    this.total+=step;
                }
               },
               components:{
                   counter:counter
               }
            })

        </script>
    </body>
</html>

1.父组件是通过属性的方式向子组件传值

在子组件中定义props，count就是要接收值的属性。

 props:['count'],

在父组件中给它赋值：两个标签，一个赋值为0，一个赋值为1，count前面的:怎么用，这里是数字，加不加:都可以，如果是字符串不能加:,加上:意味着找父组件的这个变量。:count="name"，为找父组件定义的name变量的值，赋值给count，count="name"，把name字符串赋值给count。

            <counter :count="0" @change='handleIncrease'></counter>
            <counter :count="1" @change='handleIncrease'></counter>

子组件获取值后，我们把它赋值给子组件中定义的一个变量number。然后点击时number+1，把步长返回给父组件

2.子组件通过事件触发的方式向父组件传值

 this.$emit('change',1); //发生改变，步长为1

自定义一个change事件，在父组件中用@change监听，后面跟的时参数可以多个，也可以没有参数。

            <counter :count="0" @change='handleIncrease'></counter>
            <counter :count="1" @change='handleIncrease'></counter>

父组件监听到change事件后，触发handleIncrease方法，方法的参数就给$emit中传过来的参数

vue20-父子组件传值

猜你喜欢