vue父子传参

1、父子传参

 父组件向子组件传值

父向子

父组件上边,在要接受数据的组件上通过动态属性传递

:data="data"

子组件通过props属性接受

1.数组


    props:['title','count','imgs','styles'],


2.对象

    属性名类型 Object | Array | String | Numeber | Boolean | Function


    props:{

        title:Array,

    }


    props:{

        属性名:{

            type:类型,

            required:必填项,默认值为false,

            defalult:默认值,(如果是简单值的话,直接设置,如果是数组或者对象的话,需要一个函数),

            validator(val){

            自定义格式的验证,函数return 成立

            }

        }

    }



    vue 是单向数据流,不能在子组件里面直接修改父组件传递过来的值



   子向父


        子组件里边使用$emit


    $emit('事件名称','实参1','实参2')


   


    @事件名称 = "事件处理程序"


    父组件接受的方法

        @addCount = "方法名"

        在methods方法里面写函数

        addCount(){

            console.log(1);

        }



      非父子

            3通过创建一个空对象


            在 main.js 里面Vue.prototype.$bus=new Vue();

            所有的组件都是通过vueComponent 实例出来的 vueComponent继承vue


            子组件


              传参的方式:  this.$bus.$emit('add',item)


                在created方法里面接受

                this.$bus.$on('add',(obj)=>{

                    console.log(obj)//传过来的参数值

                })

你可能感兴趣的:(vue父子传参)