父子组件的数据传递2：父组件给子组件传值，props

54 阅读 0 评论 36 点赞

我是靠谱客的博主拉长砖头，最近开发中收集的这篇文章主要介绍父子组件的数据传递2：父组件给子组件传值，props，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、父组件通过属性形式（props）给子组件传数据（单向数据流——子组件不能直接改变父组件传递的值——克隆副本，改副本）

2、子组件通过事件触发给父组件传值

<body>
//根组件
    <div id="root">
        <!--1、父组件给根组件传参:count="3"-->
       <counter :count="3" @inc="handleIncrease"></counter>   //子组件
       <counter red="2" @change="handleIncrease"></counter> 
    <div>{{total}}</div>
    </div>
    <script>
        //局部组件注册要在根组件中声明
        var counter={
            props:['count'],//2、子组件接收父组件传值
            //克隆副本，定义data
            data:function(){
                return{
                    number:this.count
                }
            },
            //3、在子组件中用父组件传来的值
            template:`<div @click="handleClick">{{number}}</div>`,
            methods:{
                handleClick:function(){
                    this.number=this.number+2;
                    this.$emit('inc',2)//2是步长，事件inc携带的内容
                }
            }
        }

        varvm=new Vue({
            el:'#root',
            data:{
                total:5
            },
            //在根组件中声明子组件
            components:{
                counter:counter
            },
            methods:{
                handleIncrease:function(step){
                    this.total+=step;
                }
            }
        })
    </script>
</body>