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当中对象进行响应!

            -

  • 相关阅读:
    闭包
    laravel 控制器
    laravel 模板
    laravel 视图
    laravel 请求
    laravel 分页
    解决启动Apache遇到的问题Permission denied: AH00072: make_sock: could not bind to address 0.0.0.0:8888
    一张号称一篇程序覆盖Python基础的代码
    [转载]激活Navicat Premium
    C语言自定义函数的形参为数组时需要注意传入长度
  • 原文地址:https://www.cnblogs.com/macro-renzhansheng/p/13415916.html
Copyright © 2011-2022 走看看