vue组件上下文

provide

使用场景: vue组件包裹使用 也为参数注入不同组件

<v-daday @select="onSelect">
 <v-children :value="x">
 </v-children>
</v-daday>

function onSelect(value) {
 console.log(value)
}
// 通过外围组件的select事件打印 内层组件的value值

使用方法: 通过provide在父组件中传递 emits

const emits = definEmits(['selsect])
provide('value',emist);
// 注意需要在组件的构成中添加slot插槽
<div >
 <slot />
</div>

在子组件中通过inject使用

const props = defineProps({
 value: {
  type: String,
  default: '',
}
});
// props 接受外围组件provide传递的第一个参数 
const emits = inject('value')

function onClick() {
 emits('select', props.value)
}
// 通过点击事件 emits向挂载select的外围组件注入value值 value为注入的key 所以当作传递参数时为字符串 props.value 为动态值
<div @click="onClick"
 <slot />
</div>

总结:

当需要用到外围组件的事件去触发内层组件的关系时可以在外围组件使用provide 内层组件使用inject将参数注入

注意: 两个组件并非为父子组件才可以使用provide 所以两个组件也可以为爷孙关系 也可以用provide从祖先组件或应用提供参数 由内层组件通过inject注入参数提供响应式 如果第二个参数默认值为函数 inject第三个参数必须要写入false

如果父组件链上多个组件对同一个key提供了值 那么离得更近的会覆盖更远的

本文系作者 @ 原创发布在 IT梦。未经许可,禁止转载。

喜欢()
0 0 投票数
Article Rating
订阅评论
提醒
guest
0 评论
内联反馈
查看所有评论
热门搜索
4 文章
0 评论
1 喜欢
Top
0
希望看到您的想法,请您发表评论x
()
x