vue20-父子组件传值

墨蓝 2022-05-10 01:44 298阅读 0赞

下面代码是一个计数器的代码，父组件把初始值传给了子组件，子组件接收后，+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。

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

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

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

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

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