VUE组件通信

• • 1- 父传子

    • 1- 传递数据

      • 1- 父级组件通过v-bind 向子级传递数据

      <child v-bind:todos="todos" :index=index></chlid>

      • 2- 子组件接收父组件传递过来的数据

      props:{ todos:Array, index:Number }

    • 2- 传递标签数据 slot

      • 参考插槽操作

  • 2- 子传父

    • 子组件 -- 触发事件 --- 触发事件 ---- $emit
    • 父组件 -- 修改数据 --- 监听事件 ---- v-on @ $on

  • 3- 不限制

    • vuex
    • pubsub
      • 订阅消息 pubsub.subscribe()
      • 发布消息 pubsub.publish()

  • 4- 祖先传子孙 -- 依赖注入

    • provide ：对象或者返回一个对象的函数 该对象包含可注入其子孙的property
    • inject : 字符串数组或者 一个对象 key：value
    • 注意：provide 与 inject 绑定不是响应，是专门设置

    Vue.com .n hfhe3cs2wxfaq1mponent("组件名",{ template:`<div>{{obj.name}}</div>`, // 子组件注入 inject：['obj'] }) let vm = new Vue({ el:#app, data:{ obj:{ 课堂练习 name:"zhangsanfeng" } }, // 父组件提供obj provide(){ return{ obj：this.obj } } })

• 7- $refs、$parent、$children

  • $parent : 父组件
    • 在子组件中直接可以通过$parent获取到父组件的数据和方法
  • $children : 子组件
    • 在父组件中直接可以通过$children 获取到父组件的方法【$children获取的是数组形式需要记住子组件的位置】
  • $refs ：子组件
    • 在父组件中直接可以通过$refs获取到父组件的数据和方法 获取的是对象形式的