vue中的provide和inject用法（vue provide inject和prop的区别）

provide和inject用法，主要是用于跨多层组件之间的数据通信传递。
解决了使用$parent、$children的多层使用麻烦问题，更简洁方便。
但是它也有自己的缺点。缺点就是数据不具有响应式。
但其实这个也是可以把它变成响应式的。
主要有2种情况需要注意：
一：一次性的，不具有相应式。

【把变量定义成单一简单类型的数据】

// 父组件
data () {
	return {
    name: '' // 单一类型
  }
},
provide () {
	name: this.name
},
 mounted () {
 	this.alterName()
 },
methods: {
	setInterval(() => {
				this.name = [Math.random()]
		}, 3000)
}

// 子组件
<template>
  	<div>{{name}</div>
  </template>
data () {
	return {
    name: ''
  }
},
inject: ['name'],
 mounted () {
  // 子组件接收到的name值仍然式空值，虽然父组件执行了定时器每隔3秒修改
  // 但是子组件这里仍然不会生效，获取到的式初始默认值而已
 	console.log(this.name)
 }

二：具有相应式。

【把变量定义成对象Object类型的数据】

// 父组件
data () {
	return {
    name: {   // 包装成对象数据结构
    	value: ''
    }
  }
},
provide () {
	name: this.name
},
 mounted () {
 	this.alterName()
 },
methods: {
	setInterval(() => {
    	this.name.value = [Math.random()]
    	// 注意这里不要用下面这种写法，若用这种写法，子组件接受到的name值仍然不具有响应式的。
			// 因为下面式对象的重新赋值，整个对象重新大换药，整个引用地址都改变了。
    			// this.name = {
					// 		value: [Math.random()]
					// }
		}, 3000)
}

// 子组件
<template>
  	<div>{{name}</div>
  </template>
data () {
	return {
    name: ''
  }
},
inject: ['name'],
 mounted () {
  // 子组件接收到的name值是响应式的，而且每隔3秒会自动动态更新接收最新的值
 	console.log(this.name)
 }