您的位置:首页 > 产品设计 > UI/UE

Vue 通讯组件

2017-09-05 13:32 239 查看
父---》子

使用绑定标签属性的方法给子组件进行绑定,在子组件内部通过props数组的方式来接受数据,接收之后就可以使用。

    (1)父组件在给子组件绑定标签属性来传递数据的时候,key值可以有-,但是在子组件的props里我们要写成小驼峰的写法

    (2)父组件可以将自己动态的数据传递给子组件,当父组件的数据发生改变,子组件收到的数据也发生改变

    (3)父组件给子组件传递数据的时候,在默认情况下是单向的,父组件的数据改变,子组件的数据也会改变,但子组件改变这条数据,父组件不会改变
.sync可实现双向绑定
.once单次绑定,只能接受第一次传过来的数据,后面父组件再怎么更改,子组件的数据都不会再改变

    (4)我们的组件可能会在多个地方使用,为了避免传入不能使用的数据,故而做了验证

       将props写成对象的格式,我们就可以对接收到的参数进行验证和处理

2.this.$children

  this.$parent

  this.$root

3.<bbb @tell-father='listenSon' ></bbb>   this.$emit('tell-father',this.word)

4.<bbb ref='child' ></bbb>   this.$refs.child

  <bbb v-for="x in [1,2,3,4]"   v-ref:child></bbb>

5.父组件可以将自己的一个方法传给子组件,子组件用props接收之后就可以调用,更改父组件的数据,也可以进行传参

  <bbb :give-father='listenSon'></bbb>      this.giveFather(this.msg)

   注意:传递方法的键名不能写成小驼峰,必须写成give-father

                     

6.非父子组件之间的通信,使用一个空的vue实例作为中央事件总线

    var angel = new Vue()

    angel.$on('C-to-D',function(msg){ that.Cdata=msg })

    giveD:function(){angel.$emit('C-to-D',this.give)}

7. vuex
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: