手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

Vue3组件间传值通信(vuex的作用越来越小)

时间:2021/10/17 11:39:51|来源:|点击: 次

Vue3组件间传值的优势

首先来看看 vue2组件间传值的局限性:
①传值 :
“props” , “$emit”可以发现传递过去后都无法改变传递的值

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

③那我们要改怎么办呢?
在这里插入图片描述


### Vue3组件间传值常用有那些 ?(vuex的作用越来越小) **1.通过proxy.$parent(最方便的一种)******* ①父组件:
	setup(){
		const toSon = ref(123);
		return {toSon} 
	}

②子组件:

	import { getCurrentInstance} from 'vue'
	setup(){
		const {proxy} = getCurrentInstance();
		const toSon = proxy.$parent.toSon;
		return { toSon }
	}

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



2.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不仅可以那到父级,也可以拿到祖辈级。
②所以使用值的时候我们首先选择在父级创建要使用的参数



3. “props” 和 “$emit” ** (最繁琐的一种但相比vue2,可以修改传递的值)

①父组件:

<son @handle="sontofather" :fathertoson="fathertoson"></son>.....
setup(){
     const fathertoson= ref('传入子组件的name');
     function sontofather(data){ console.log(data); }
     return {sontofather,fathertoson}
 }

②子组件:

props: {
    fathertoson: String,
},
setup(props){
	const fathertoson = props.fathertoson;
    function stf(){  ctx.emit('handle', 123); 
    return {stf , fathertoson }
}

Copyright © 2002-2019 某某自媒体运营 版权所有