vue3 常用的组件间通信
通过proxy.$parent 和ref通过 provide 、inject 方法通过“props” 和 “$emit”
·
Ⅰ、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类,实现订阅发布
实现过程 => 点击这里
更多推荐
已为社区贡献8条内容
所有评论(0)