vue中的inject用法及说明

目录
  • vue inject用法
    • 作用：刷新vue组件
  • 使用prvide inject的超级的一个大坑
    • 解决的办法

vue inject用法

作用：刷新vue组件

使用方法：

在APP.vue中

 provide(){
            return {
                reload:this.reload
            }
        },
methods:{
            reload(){
                this.isRouterAlive = false
                this.$nextTick(function(){
                    this.isRouterAlive = true
                })
            }
        }

子组件中使用：

inject: ['reload'],

引入后直接this.reload()即可

使用prvide inject的超级的一个大坑

组件化开发是必不可少的,可是也会伴随着很多头疼的事,有时候组件嵌套太深会让页面传值太麻烦,这时候vuex因此诞生,但是有时候我们不想用vuex,有没有其他更简单的方法呢？是 provide inject  官方提供的这两个api 首先我们不考虑其他因素，专门看看 这两个单词是什么意思 provide（提供） inject(注入)

专门从字面意思就应该知道了 应该是父组件用provide 子组件用inject

使用的方法也很简单

import {ref,reactive, provide} from 'vue'

在父组件引入这个 api provide

然后想穿什么值

provide('data',message)

data值得是props名字 告诉子组件 你要接收就用用data message是你要传入的数据

子组件接收

const injectaa = inject('data')

不需要引入inject 就能收到值了

很好,你们以为这就完了吗？下面讲的是一个超级大坑

就是如果传入的是一个异步数据 这个api就会让人头疼起来

因为这两个api属于同步的所以执行起来

他是先在父组件直接provide 然后子组件Inject 执行

导致出现 null

解决的办法

 const message = ref([])
 console.log('1先执行')

 provide('message',message)

 function getGood(){

 apiGood.getGoodId(id).then(res=>{

 message.value = res.data

 console.log
 })

要传入的数据为

const message = ref([])

这样才能传过去

但是又出现新的问题

我们已经看到值了 但是进一步打印会发现

是个空的,是不是很奇怪 直接打印Inject就能出来值,inject.value就出不了

其实这些值都是存在虚拟DOM的所以只能看还没加载过来,所以只能观看而不可亵玩焉

你想要打印这些值只能让console.log变为一个异步

让那些值传过来在执行

如是

值就出来了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3 provide与inject的使用小技巧分享

    目录 vue3 provide与inject使用技巧 进入正题 父组件 child组件 son组件 vue3的一些实用技巧 v-for 和 v-if 不要一起使用(Vue2) vue3 provide与inject使用技巧 主要使用来沟通上下文,比如父——子——子1——子2,父组件和子2组件间的通信,不使用这方法也能解决的方式还有两种 props $emit 一层一层的传 弊端:写着太麻烦 vuex 用多了性能就不太行了 进入正题 官方文档上只提供了传递值的方式,没有提供子组件去跨级改父级组件的

  • Vue 中 provide和inject的使用

    Vue 中 provide和inject的使用

    目录 前言 Vue中如何使用provide和inject 在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most Popular Posts.在PopularList中我们可以通过name访问数据. <PopularList name="Most Popular Posts" /> 但是有时子

  • Vue3中Provide / Inject的实现原理分享

    Vue3中Provide / Inject的实现原理分享

    目录 前言 原型和原型链的知识回顾 使用 Provide provide API实现原理 组件实例对象初始化时provides属性的处理 使用 Inject inject API实现原理 provide/inject实现原理总结 拓展:Object.create原理 拓展:两个连续赋值的表达式 总结 前言 Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的,所以在了解Vue3 的 Provide / Inject 的实现原理之前,我们先复习一下原型和

  • vue中provide inject的响应式监听解决方案

    目录 provide inject的响应式监听解决 vue监听赋值及provide与inject provide inject的响应式监听解决 提示:provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. 所以传值传对象即可 provide(){     return {       provObj: {         uuidList:{}       }     }   }, this._provided.p

  • vue3中 provide 和 inject 用法及原理

    前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦. 像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据.同时兄弟组件之间传值更方便. 一.Vue2 的 provide

  • vue中的inject用法及说明

    vue中的inject用法及说明

    目录 vue inject用法 作用:刷新vue组件 使用prvide inject的超级的一个大坑 解决的办法 vue inject用法 作用:刷新vue组件 使用方法: 在APP.vue中  provide(){             return {                 reload:this.reload             }         }, methods:{             reload(){                 this.isRoute

  • vue中appear的用法

    关于appear的用法和enter的用法相似,它只是在第一次渲染的时候才会起作用.看完整的代码: 别忘了引用vue.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>初始渲染的过渡</title> <script src="vue.js"></script>

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • vue中keep-alive的用法及问题描述

    1.keep-alive的作用以及好处 在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能. 2.keep-alive的基本用法 在app.vue中 <!-- 缓存所有的页面 --> <keep-alive> <router-view v-if="$route.meta.keep_alive"&g

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中的inject学习教程

    最近看源码有一段对于整合参数的代码, normalizeProps(child, vm) normalizeInject(child, vm) normalizeDirectives(child) 想象里边的Inject很少用到,所以查了一下资料, 通常组件传参是有两种情况 父子组件进行传参,这时候通常利用props 非父子组件传参,这时候一般利用vuex 会有一种情况隔代组件传参,这时候可以利用props一层一层传递下去,但是代码就比较乱了 所以就有了 provide/inject 进行隔代组

  • vue中$refs的用法及作用详解

    一般来讲,获取DOM元素,需document.querySelector(".input1")获取这个dom节点,然后在获取input1的值. 但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 用法如下: HTML: <div id="app"> <input

  • 聊聊Vue中provide/inject的应用详解

    众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj

  • vue中watch的用法汇总

    在vue中,使用watch来响应数据的变化.watch的用法大致有三种. 1. 常用用法 <input type="text" v-model="name"/> new Vue({ el: '#app', data: { name: '咸鱼' }, watch: { name(newVal,oldVal) { // ... } } }) 直接写一个监听处理函数,当每次监听到 name 值发生改变时,执行函数.也可以在所监听的数据后面直接加字符串形式的方法

随机推荐