精华内容
下载资源
问答
  • 浅谈vueprovideinject 用法

    千次阅读 2021-01-01 19:14:38
    1、provideinject的功能 通过provideinject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙后代 provideinject 主要在开发高阶插件/组件库时使用 2、使用示例 3个组件 A(父级)、B(子级)、C(孙子...

    1、provide与inject的功能

    通过provide与inject,可以把一个祖先组件指定的数据和方法,传递给其所有子孙后代

    provide 和 inject 主要在开发高阶插件/组件库时使用

    2、使用示例

    3个组件 A(父级)、B(子级)、C(孙子级)

    父组件A ---- 通过provide指定传递给子孙组件的值

    export default {
      provide() {     // provide是一个匿名函数,返回一个对象
        return {
          reload: this.reload,
          msg:this.msg      
        };
      },
      data(){
        return {
          msg:'hello world!' 
       }
      },
      methods: {
        reload() {
          console.log("C调用A的方法!");
        },
      },
    },
    

    子/孙组件 ---- 通过inject 获取祖先组件传递过来的值

    export default {
     //inject: ["reload","msg"],   简写
      inject:{                  // 详细指定来源以及默认值
         msg:{
            from:'A',   //表示从组件A传递过来的
            default:'a default msg'
         },
         reload:{
            from:'A'
         }
      },
      mounted() {
        this.reload();
      },
    },
    

    参考链接:https://cn.vuejs.org/v2/api/#provide-inject

    展开全文
  • 官网上说provideinject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。 provide: Object | () => Object(一个对象或返回一个对象的函数) inject...
  • 了解Vue 3的provideinject用法前言在组合式API中的用法基本用法 前言 provideinjectVue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个。 一句话介绍:provide可以向所有子孙组件提供数据以及提供...

    了解Vue 3的provide和inject用法

    前言

    provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个。

    一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。

    在组合式API中的用法

    基本用法

    似乎,组合式API的provide没有提供批量方法, 只能每个变量写一句。

    顶级组件:

    <template>
      <div>
        <son />
      </div>
    </template>
    
    <script setup>
    import son from "./son.vue";
    import { provide } from "vue";
    provide("abc", "123");
    </script>
    

    子组件:

    <template>
      <div>
        <grandson />
      </div>
    </template>
    
    <script setup>
    import grandson from "./grandson.vue";
    </script>
    

    孙组件:

    <template>
      <div>我是孙子</div>
    </template>
    
    <script setup>
    import { inject } from "vue";
    const abc = inject("abc");
    console.log(abc);
    </script>
    

    官方说:

    inject() can only be used inside setup() or functional components.

    这个意思是说,inject()只能放在setup()生命周期里运行,不能放在别的周期里运行,也不能放在事件周期里运行。所以你可以先在setup()周期取值。

    例一:这是允许的,因为console.log是setup()生命周期里的同步代码

    function xx() {
      console.log(inject("abc"))
    }
    xx()
    

    例二:这是禁止的,因为setTimeout是异步函数,执行console.log(inject(“abc”))的时候已经不在setup()生命周期里。

    function xx() {
      setTimeout(() => {
        console.log(inject("abc"))
      })
    }
    xx()
    

    例三:让例一的xx函数作为鼠标事件回调,也是禁止的,原因也一样。

    例四:放在Promise.then()也是禁止的,比如

    Promise.resolve().then(() => {
      console.log(inject("abc"))
    })
    
    展开全文
  • <script lang="ts"> import { defineComponent, ref, reactive, provide } from 'vue' import Child from './components/child.vue' export default defineComponent({ components:{ Child }, setup() { const state...

    主要使用来沟通上下文,比如父——子——子1——子2,父组件和子2组件间的通信,不使用这方法也能解决的方式还有两种

    1. props $emit 一层一层的传 弊端:写着太麻烦
    2. vuex 用多了性能就不太行了

    进入正题

    官方文档上只提供了传递值的方式,没有提供子组件去跨级改父级组件的值,但是可以换一种写法就可以了,直接代码

    代码结构: 父组件——child组件——son组件

    父组件

    <template>
      <div class="text">盒子 {{state.name}}</div>
      <div class="box">
       <Child/>
      </div>
    </template>
    
    <script lang="ts">
    import { defineComponent, ref, reactive, provide } from 'vue'
    import Child from './components/child.vue'
    export default defineComponent({
      components:{
        Child
      },
      setup() {
    
        const state: any = reactive({
          name: 'zlz',
          age: 24
        })
    
        const update = (key: string, val: any): void => {
          state[key] = val
        }
    
        provide('ref2', {
          val: state,  // val需要传递的值
          update // 更新传递的值的方法
        })
        return {
          state
        }
      }
    })
    </script>
    
    ps:当然也可以换一种写法 这一种写法要简便一点 但是语义化更弱
    const state: any = reactive({
      name: 'zlz',
      age: 24,
      update // 更新state的方法
    })
    
    provide('ref2', state)
    

    child组件

    <template>
      <div class="box">
        <div class="box">child组件</div>
        <Son/>
      </div>
    </template>
    
    <script>
    import { defineComponent, reactive, toRaw } from 'vue'
    import Son from './son.vue'
    
    export default defineComponent({
      components:{
        Son
      },
      setup() {
    
      }
    })
    </script>
    
    

    son组件

    <template>
      <div class="box">
        son组件 {{ref2.val.age}}
      </div>
      <button @click="handleClick">
        子组件点击
      </button>
    </template>
    
    <script>
    import { inject } from 'vue'
    
    export default {
      setup() {
        const ref2 = inject('ref2')
        const handleClick = () => {
          const key = 'age'
          ref2.update(key, 111) // 调用传递下来的方法去更新父组件的值
        }
        return {
          ref2,
          handleClick
        }
      }
    }
    </script>
    
    展开全文
  • vue3.0 provideinject

    千次阅读 2020-07-25 21:55:51
    import {provide,inject} from 'vue'; setup() { provide('xx','1234') const data=inject('xx',该参数为默认值); 使用ref来保证provided和injected之间值的响应: 如果注入一个响应式对象,则它的...
    两者都只能在当前活动组件实例的setup()中调用。
    生产者消费者
    
    使用 
    	import {provide,inject} from 'vue';
    	
    	setup()
    	{
    		provide('xx','1234')
    		const data=inject('xx',该参数为默认值);
    		
    		使用ref来保证provided和injected之间值的响应:
    			如果注入一个响应式对象,则它的状态变化也可以被侦听。
    			
    			提供者:
    			const themeRef = ref('dark')
    			provide(ThemeSymbol, themeRef)
    			
    			使用者:
    			const theme = inject(ThemeSymbol, ref('light'))
    			watchEffect(() => {
    			  console.log(`theme set to: ${theme.value}`)
    			})
    
    	}
    
    展开全文
  • 主要介绍了Vue.js中provide/inject实现响应式数据更新,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue2中的provideinject

    2021-09-03 10:13:26
    一个页面无数个无数层组件,用到非常多的props和$emit,今天不小心看到 provideinject 这两个属性,也可以用来传值,在这里记录一下。首先先来个复习。 复习 父传子:props 子传父:$emit 父获取或调用子的数据或...
  • vue3.0 provide/inject

    2021-05-22 15:22:01
    import { provide } from 'vue'; setup(){ provide('key', value) 使得数据具有响应性 provide(key,ref(...)) provide(key,reactive(...)) } 2、子级组件导入 import { inject } from 'vue'; ...
  • vue中的provideinject

    万次阅读 多人点赞 2018-10-11 14:30:40
    provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。 定义说明:这对选项是一起使用的。以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游...
  • 主要介绍了Vue 2.0 依赖注入 provide/inject组合,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下
  • vueprovideinject特性

    千次阅读 2020-09-28 18:22:27
    vue2.2.0 中新增provideinject属性,可以方便的帮助我们进行组件间的传值。 使用的方式很简单: 父组件通过provide提供数据,其他组价可以使用inject注入数据。 注意 不推荐直接用于应用程序代码中。一般使用...
  • Vue3.0 组件的provide/inject

    千次阅读 2020-10-22 23:57:19
    组件的provide/inject 阅读本篇之前应当先阅读组件基础。 通常当我们需要将数据从父组件传递到子组件时,我们通过props实现。 设想一下这样的一个组件结构,这个结构中有一些嵌套层级很深的组件,我们想在内嵌...
  • vue3.x中使用provideinject特别注意:3.1vue3.x中使用provideinject时,非响应式数据的写法3.2vue3.x中使用provideinject时,响应式数据的写法 一. 使用场景 当我们需要从父组件向子组件传递数据时,...
  • vue3版本provideinject用法

    万次阅读 2021-01-12 17:01:51
    在父组件操作 <template> <div id="nav"> <h3>{{title}}</h3> <button @click="setTitle">... import { ref, provide } from 'vue' export default { setup() {
  • provideinject也是组件通信的一种方式,它是父组件向其他子组件,孙组件通信的一种方式 父组件,father.vue <template> <div> <children /> </div> </template> <script> ...
  • 在本篇文章里小编给大家整理的是一篇关于vue父组件给子组件的组件传值provide inject的方法,需要的朋友们学习下。
  • 主要介绍了vue中的provide / inject 有什么用处,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue 解决provideinject响应

    千次阅读 2019-07-13 14:47:12
    vue 解决provideinject响应 官网上说provideinject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的。 provide:Object | () => Object(一个...
  • vue3中的provideinject

    2021-09-14 20:17:12
    套路:父组件有一个 provide 选项来提供数据,后代组件有一个 inject 选项来开始使用这些数据 具体写法(需要引入): 祖组件中 import { provide } from "vue"; setup(){ ...... let car = reactive({...
  • provideinjectVue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个。 一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。 在组合式API中的用法 ...
  • vue3的provideinject

    2021-03-03 10:12:10
    在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 setup() 期间调用 使用 Provide let name = ref('name') let info = reactive({ age:18 }) provide("name", name); provide("info", info); //...
  • vue3中provide && inject的使用

    千次阅读 2020-12-08 11:58:15
    Vue2中的 provideinject 作用相同,只不过在Vue3中需要手动从 vue 中导入 这里简单说明一下这两个方法的作用: provide :向子组件以及子孙组件传递数据。接收两个参数,第一个参数是 key,即数据的名称;第...
  • Vue 3 组合式 provide/inject

    千次阅读 2020-11-14 16:57:09
    组合式提供与注入在之前的章节,我们讲了选项式的 提供与注入,今天我们继续讲组合式提供与注入。我们也可以在组合式 API 中使用 provide/inject。两者都只能在当前活动实例的 ...
  • 5. 还有常见的边界情况$parent、$children、$root、$refs、provide/inject 6. 此外还有一些非props特性$attrs、$listeners 面试官追问:“那你能分别说说他们的原理吗?” 我:[一脸懵逼]???? 在介绍provide和...
  • provide是一级组件传过来的数值,inject是下一级组件获取的值 二:示例 //one.vue <template> <two></two> <div style="background-color: #2C3E50;color: #fff;padding: 20px;margin: 10px;...
  • vueprovideinject的使用

    千次阅读 2019-09-05 23:18:05
    本文主要介绍了vue当中的provideinject的使用,现在分享给大家
  • 案例 UI美眉说咱家的选项菜单太丑了,小哥哥能不能美化一下呀,洒家自然是说小意思啦~ 自定义一个select组件,so easy~ 简单粗暴型: []> option作为数据进来就ok啦。 然后发现下列问题: key-value,不是所有的...
  • 当我们想用父组件向深层子组件传递数据时,需要使用 props 沿着组件链逐级传递下去,十分麻烦,这时 provide/inject 就可以派上用场。 论组件层次结构有多深,父组件都可以作为其所有子组件的依赖提供者。这个特性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,355
精华内容 2,942
关键字:

injectprovidevue

vue 订阅