zoukankan      html  css  js  c++  java
  • vue组件通讯之provide / inject

    什么是 provide / inject [传送门]

    vue的组件通讯方式我们熟知的有 props $emit bus vuex ,另外就是 provide/inject 

     provide/inject  是 Vue.js 2.2.0 版本后新增的 API,在文档中这样介绍 :

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

    
    

    inject 选项应该是:

    • 一个字符串数组,或
    • 一个对象,对象的 key 是本地的绑定名,value 是:
      • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或
      • 一个对象,该对象的:
        • from 属性是在可用的注入内容中搜索用的 key (字符串或 Symbol)
        • default 属性是降级情况下使用的 value
    
    

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。


    并且文档中有如下提示:
    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。

    使用的例子:

    // 父级组件提供 'foo'
    var Provider = {
        provide: {
            foo: 'bar'
        },
    }
    
    // 子组件注入 'foo'
    var Child = {
        inject: ['foo'],
        created () {
            console.log(this.foo) // => "bar"
         }
    }
  • 相关阅读:
    HTML学习笔记(四)常用标签
    HTML学习笔记(三)样式CSS
    HTML学习笔记(二)HTML格式化
    Myeclipse配置tomcat和jdk
    如何查看jdk版本和路径
    eclipse导入别人项目配置tomcat和jdk
    eclipse配置Tomcat
    maven管理工具配置
    leetcode_374. 猜数字大小
    leetcode_704. 二分查找
  • 原文地址:https://www.cnblogs.com/guojikun/p/10150653.html
Copyright © 2011-2022 走看看