Ⅰ、Vue3组件间传值的优势

首先来看看 vue2组件间传值的局限性:
①传值 :
vue2我们可以发现 “props” , “emit”可以发现传递的值是无法直接修改的

②官方说明:(为何不能修改传递的值)
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。

③那我们要怎样间接修改呢？

Ⅱ、 Vue3组件间传值常用有那些 ？ （vuex的作用越来越小）

①.通过proxy.$parent 和ref（最方便的一种）

Ⅰ. 子组件 （获取和修改)=> 父组件

①父组件:
	setup(){
		let val = ref(123);
		return { val } 
	}
	
②子组件:
	import {  getCurrentInstance  } from 'vue'
	setup(){
		 const {proxy} = getCurrentInstance()；
	     let val = proxy.$parent.val;   //获取和修改
	     val.value = 456;
	     return { val }
	}

Ⅱ. 父组件 （获取和修改)=> 子组件

①父组件:
...
<Son  ref = 'getSon'><Son/>
...
setup() {
	const  getSon = ref(null);    
    console.log( sonRef.value.val.a );    //获取和修改
}

②子组件:
setup(){
	const val = reactive( { a:  1});
	return { val };
}

注意：
①proxy.$parent只能拿到父组件的 setup() 中 return 的参数
②如果想拿到父组件的父组件就"proxy. $parent. $parent .属性"
③使用我们现在父组件创建好子组件需要的值，子组件获取，进行双向修改。

---

②通过 provide 、inject 方法 （只能从外层向内层传递）

Ⅱ. 只能 父组件 => 子组件 => 孙…

①父组件:   
    import { provide } from 'vue'
	setup(){
		 const obj= ref(123)
		 provide('obj2', obj)    //向下传递
		 return  { obj }
	}
	
②子组件：
    import { inject } from 'vue'
	setup(){
		const obj2= inject( 'obj2');     //接收父传递下来的
		return  { obj2 }
	}

注意：
①inject不仅可以那到父级，也可以拿到祖辈级。
②所以使用值的时候我们首先选择在父级创建要使用的参数

---

③通过“props” 和 “$emit” ( 相比vue2，可以修改传递的值)

Ⅰ. 子组件 （获取和修改)=> 父组件 <父传子>

①父组件：
...
<son  :toSon="toSon"></son>
...
setup(){
     const toSon= ref('传入子组件的name');
     return { toSon }
 }
 
②子组件： 
props: {
    toSon: String,
},
setup(props){
	const toSon= props.toSon;
    return { toSon }
}

Ⅱ. 父组件 （获取和修改)=> 子组件 <父传子>

①父组件：
...
<son @handle="toFather" ></son>
...
setup(){
     function toFather(data){ console.log(data); }
     return { toFather }
 }
 
②子组件： 
...
<button @click='btn_click'> 点击 </button>
...
setup( props, ctx ){
    function btn_click() {   
    	ctx.emit('handle', 123 ); 
    }
    return { btn_click }
}

注意：
①相比vue2可以直接修改值，但实际上修改的是，包裹了一层proxy对象中的属性。

④ 通过eventBus 订阅发布模式

只需要创建一个 js 文件，在js中写入一个class类，实现订阅发布
实现过程 => 点击这里