<body>
<div id="app"></div>
</body>
<script>
const app = Vue.createApp({
setup() {
const { ref, provide } = Vue;
const name = ref('zhangsan');
// 定义修改方法在父组件
const changeName = (value) => {
name.value = value;
}
// 通过provide传递参数
provide('name', name);
provide('changeName', changeName);
return {
}
},
template: `<child />`
})
app.component('child', {
template: `<div @click="handleChangeName">{{name}}</div>`,
setup() {
const { inject } = Vue;
// 获取参数
const name = inject('name');
const changeName = inject('changeName');
// 调用修改方法修改父组件的值
const handleChangeName = () => {
changeName('lisi')
}
return {
name,
handleChangeName
}
}
})
const vm = app.mount("#app");
</script>
Vue 3 provide 和 inject 传参
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 前言 这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成...
- vue3已release了，一些新特性也需要了解下，在多层组件传递参数情况下，provide是更好的选择 组合式提...
- 使用provide和inject的Vue依赖项注入非常适合构建Vue3插件或避免prop多层传递。 尽管不经常使用...
- Vue3 中使用 provide inject 刷新部分路由页面 其中原理就是使用 provide 提供一个 re...
