vue父子传参

Posted 2023-03-15

参考技术A 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'）

    <button @click="$emit('addCount',count)"></button>

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

    父组件接受的方法

        @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)//传过来的参数值

                )