vue3 provide inject用法

父组件

<template><div id="nav"><h3>{{title}}</h3><button @click="setTitle">同时改变title</button></div>
</template>
<script>import { ref, provide } from 'vue'export default {setup() {let title = ref('传值')provide('title', title); // provide的第一个为名称，第二个值为所需要传的参数let setTitle = () => {title.value = '点击后，title会变成这个'; // 点击后都会有响应式哦！}return {title,setTitle}}}
</script>

子组件的子组件(子组件就不显示代码了，和上边的代码是深层套娃关系)

<template><div class="hello"><h4>{{title}}父组件点击之后这个title也会跟着变</h4></div>
</template>
<script>import { inject } from 'vue'export default {let title = inject('title'); // inject的参数为provide过来的名称return {title}}
</script>

vue3 provide inject用法相关推荐

浅析provide/inject用法、响应式、全局传递
前言 Vue的父子间传值 : props 爷孙或者更深嵌套的组件间传值: provide/inject 更复杂的结构:vuex provide/inject 提供/注入 provide 一个对象或返回 ...
vue刷新当前页面--provide / inject 用法
window.reload()/router.go(0): 采用window.reload(),或者router.go(0)刷新时,整个浏览器重新加载,闪烁.严重影响体验 provide / inje ...
【Vue】采用provide/inject方式刷新当前页面
1.场景在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.rel ...
vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
export default用法vue_Vue组件通信—provide/inject
前言: 之前在 Vue 中进行组件通信一般都会使用 props,开始使用 provide/inject 是非常偶然的一次尝试. 当时在开发中需要实现祖孙组件,甚至祖祖祖祖孙组件之间的通信,在这种多层级 ...
VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
vue3中的provide/inject(提供/注入)
vue3中的provide/inject(提供注入) 在说provide/inject先说一下prop逐级穿透问题. 通常我们从父组件向子组件传递数据时,会用到props.对于只需要传递一层或二层时还 ...
Vue 3的provide和inject用法
了解Vue 3的provide和inject用法前言在组合式API中的用法基本用法前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...

vue3 provide inject用法

vue3 provide inject用法相关推荐

最新文章

热门文章