provide：Object | () => Object inject：Array | { [key: string]: string | Symbol | Object } provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。是2.2.0版本 新增的。 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

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

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

 

1 app组件 使用provide  

<template> <div id="app"> <div>{{a}}</div> <router-view /> </div> </template> <script> export default { name: 'App', data () { return { a: "我是app的msg" } }, provide () { return { elForm: this, xcq: this.xxx } }, methods: { xxx () { return this.a } }, } </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

2 helloorld里面的代码

<template> <div class="hello"> 我是Hello world {{msg}} <dashi /> </div> </template> <script> import dashi from './dashi' export default { name: 'HelloWorld', components: { dashi }, data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

3 dashi组件 里面使用inject

<!-- --> <template> <div> 我是hello下的字组件 <button @click="test">按我</button> </div> </template> <script> export default { data () { return { }; }, inject: ['elForm', "xcq"], computed: {}, beforeMount () { }, mounted () { }, methods: { test () { this.xcq() console.log("elForm", this.xcq()) } }, watch: {} } </script> <style lang='' scoped> </style>