zoukankan      html  css  js  c++  java
  • Vue_组件通信完整整理


    组件之间的数据通信:

        1:props 父传子

            父组件中添加属性:

                -单向绑定,支持变量传参

                -或者直接传值

            子组件中通过props:[数组],形式获取值

        2:发布订阅:

            子改父:

                -父组件中添加属性:通过自定义事件方法绑定到父组件的方法——更改父组件中的变量值

                -子组件中对应的响应事件方法来触发子组件绑定的自定义事件: this.$emit('自定义事件名称',参数)

            兄弟:通过公共中介EventBus实现通信

                -new VUe 获取eventBus一个通信中介

                -兄弟组件【监听】创建完后:create方法中:注册监听 eventBus.$on('监听事件名称',执行事件方法名)

                -兄弟组件【发布】,通过eventBus.$emit('监听事件名称',传参)

    总结:

        测试:爷爷传孙子:通过props失效问题——问题还是自己之前传得的唯一那个对象【关键是确保两个对象,即对应两个eventBus即可!】!{所以本质是可以的!}

        封装用法:

            子组件中:this.$parent:父组件实例

            父组件:this.$children[0]:清晰获取子组件位置

        3:provide/inject 祖先和后代

            -往往将后代中需要使用的数据定义在provide中,这些数据存储在_provided中,provide是一个函数可以确保所有的实力都挂载完成

            -inject注册的信息会像data一样,挂载到实例当中

            -强制刷新页面  this.$forceUpdate();

            -provide&inject不可响应;所以可以通过将其封装到data当中对象进行响应!

            -

  • 相关阅读:
    axios
    vue-cli-service 报错
    避免大型、复杂的布局和布局抖动
    vue 父子通信
    == 区别 === ,!= 区别 !==
    全选/取消全选
    vue 注意
    pyparsing:自定义一个属于你的语法解析器(更新中)
    《python解释器源码剖析》第11章--python虚拟机中的控制流
    collections:内建模块,提供额外的集合类
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13415916.html
Copyright © 2011-2022 走看看