9、provider和inject：父传子，子传父,组件通讯

定义父组件

<template>
	<div class="app">
		<h1>父组件----{{ money }}</h1>
		<button @click="money++">按钮</button>
		<hr />
		<Demo :money="money"></Demo>
	</div>
</template>

<script>
	import Demo from './Demo.vue'
	import {
		ref,
		provide
	} from 'vue'
	export default {
		components: {
			Demo
		},
		setup() {
			// provider和inject
			const money = ref(100)

			// js中作用域问题
			const changeMoney = (n) => {
				console.log(money)
				money.value = n
			}

			// 组件提供了money属性，在子组件中使用 const money = inject('money')接收money
			// 组件提供了changeMoney方法，在孙子组件中使用 const changeMoney = inject('changeMoney')接收该方法
			provide('money', money)
			provide('changeMoney', changeMoney)
			return {
				money
			}
		}
	}
</script>

定义子组件DEMO，接收money属性，父传子

<template>
	<div class="demo">
		我是demo子组件 ---{{ money }}
		<hr />
		<Hello></Hello>
	</div>
</template>

<script>
	import {
		inject
	} from 'vue'
	import Hello from './Hello.vue'
	export default {
		components: {
			Hello
		},
		setup(props) {
			console.log(props)
			const money = inject('money')
			return {
				money
			}
		},
		// 父传子也可以使用vue2的props接收，props参数 在setup(props) 中使用
		props: {
			money: Number
		}
	}
</script>

定义孙子组件Hello，接收changeMoney方法。孙子传父，修改money的值

<template>
	<div>
		hello组件 ---{{ money }}
		<button @click="fn">修改</button>
	</div>
</template>
<script>
	import {
		inject
	} from 'vue'
	export default {
		setup() {
			const money = inject('money')
			const changeMoney = inject('changeMoney')

			const fn = () => {
				changeMoney(200000) // 子传父，使用changeMoney方法 修改money的值
			}
			return {
				money,
				fn
			}
		}
	}
</script>