vue小程序组件传值（微信小程序自定义组件传值）

本篇文章给大家谈谈vue小程序组件传值，以及微信小程序自定义组件传值对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。 今天给各位分享vue小程序组件传值的知识，其中也会对微信小程序自定义组件传值进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、vue父组件与子组件之间的传值
• 2、小程序组件里的数据传递
• 3、vue父子传参
• 4、Vue 组件间传参之依赖注入

vue父组件与子组件之间的传值

好好生活 -- 即将拥有八块腹肌的程序员

1.父子组件的传值

        父传子通过props传递vue小程序组件传值，子传父通过$emit

        还有兄弟传值公共的bus,夸组件传值vuex

传值的方式有很多种vue小程序组件传值，这里就先介绍下简单的父子传值
父传子
通过在子组件上自定义属性，将data流入，子组件可以通过props来接受流入的值如图vue小程序组件传值：
最后通过this.program的方式可以直接使用这个值
子传父

由于数据是单向流通的这里不能再通过props在子组件传值给父组件，需要通过$emit的方式去触发事件将子组件的值传递给父组件如图vue小程序组件传值：

通过自定义方法在父组件methods中用于接收子组件传递的数据,子组件中通过this.$emit("weekFn", res.data.enable);语句，weekFn：在父组件中自定义的方法名，res.data.enable传递给父组件的数据，weekFn（value）{value用于接收子组件传递过来的值}。
说到这其实这个也可以进一步简化，通过sync修饰符将自定义方法和自定义属性简化为,如图：
通过this.$emit('update:program', res.data.enable)语法可以直接修改data的值，为什么能修改呢 看下下面的图就知道了

    

sync其实就是一个语法糖，vue小程序组件传值他将自定义方法这一步简化了，通过.sync直接将赋值这一步合并。

关于公共bus，感觉功能并不是很实用，vuex可以完全替代这个这里就不详细讲解了，下一章就详细讲解vuex中的值传递。

小程序组件里的数据传递

先上一段官方文档

文档说绝大多数初始化工作都在 attached 生命周期进行，但是小程序组件数据分为组件的内部数据 data: {} 和从页面传递过来的 properties: {} 。但是有个问题是在组件的 attached 中无法拿到使用组件的页面中setData的值。

给组件传递myString

组件接受myString

所以可以看出在组件里 mySrting 在 created 取的是组件的默认值， attached 取的是页面里 data 的初始数据， ready 取的才是页面 setData 之后的值。具体原理应该要研究下组件的生命周期函数的源码了，可能是在组件 attached 之后页面才 onLoad 。反正直接在组件里使用 mySrting 就不会有这些问题，但如果想用页面 setData 后的 myString 来对组件的数据初始化，就只能放在组件的 ready 里而不能放在 attached 里、

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

                })

Vue 组件间传参之依赖注入

1.可以让我们在任意后代组件中访问父组件注入的数据
2.不用担心改变组件结构影响数据获取

然而，依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟 使用 $root 做这件事都是不够好的。

父组件

子组件 关于vue小程序组件传值和微信小程序自定义组件传值的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。 vue小程序组件传值的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于微信小程序自定义组件传值、vue小程序组件传值的信息别忘了在本站进行查找喔。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。