欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中的依賴注入provide和inject簡單介紹

 更新時間:2022年11月06日 11:03:49   作者:螢火之森-Thezero  
這篇文章主要介紹了vue中的依賴注入provide和inject簡單介紹,provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法,本文通過組價刷新的案列給大家詳細(xì)講解,需要的朋友可以參考下

vue中的依賴注入 provide 和 inject

vue中的依賴注入 provide 和 inject

在這里插入圖片描述

provide 選項(xiàng)允許我們指定我們想要提供給后代組件的數(shù)據(jù)/方法。

下面是一個組價刷新的案列

<template>
  <div >
    <div class="view">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isRouterAlive: true
    }
  },
  provide() {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function() {
        this.isRouterAlive = true
      })
    }
  }
}

然后在任何后代組件里,我們都可以使用 inject 選項(xiàng)來接收指定的我們想要添加在這個實(shí)例上的屬性:

inject: ['reload']

注:依賴注入所提供的屬性是非響應(yīng)式

vue中的依賴注入provide和inject場景解析(簡單易懂)

本文開始,首先我們來看這兩個詞的意思,provide:提供 inject:注入

用處:

父組件可以向其所有子組件傳入數(shù)據(jù),而“不管子組件層次結(jié)構(gòu)有多深(非父子和父子咱都能傳)”

特性:

父組件有一個provide選項(xiàng)來提供數(shù)據(jù)

子組件有一個inject選項(xiàng)來開始使用這個數(shù)據(jù)

本文參考組件層級:

Index組件

\ A組件

\ B組件

代碼區(qū):

場景1:我想要Index組件直接給b組件傳值

Index組件代碼:

<template>
  <div>
    <div>我是index組件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {}
  },
  provide: {
    text: '我是父組件的provide信息666'
  }
}
</script>

<style></style>

接收的B組件代碼:

<template>
  <div>
    <div>我是B組件</div>
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['text']
}
</script>

<style></style>

當(dāng)然,provide還有第二種寫法,寫成函數(shù)的形式

Index組件代碼:

<template>
  <div>
    <div>我是index組件</div>
    <A></A>
  </div>
</template>

<script>
import A from '@/components/A.vue'

export default {
  components: {
    A
  },
  data() {
    return {
      arr: ['1', '2', '3']
    }
  },
  // provide: {
  //   text: '我是父組件的provide信息666'
  // }
  provide() {
    return {
      arr: this.arr
    }
  }
}
</script>

<style></style>

B組件代碼:

<template>
  <div>
    <div>我是B組件</div>
    <div>{{ msg }}</div>
    <ul v-for="(item, index) in arr" :key="index">
      <li>{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'B',
  data() {
    return {
      msg: this.text
    }
  },
  inject: ['arr']
}
</script>

<style></style>

運(yùn)行截圖:

對比:

如果使用常見的props方式傳值需要:index->a->b

如果使用provide/inject方式傳值:index->a index->b

本文如有錯誤,還望各位批評指針,希望能幫助到大家更好的理解vue的provide和inject

到此這篇關(guān)于vue中的依賴注入provide和inject簡單介紹的文章就介紹到這了,更多相關(guān)vue依賴注入provide和inject內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例

    vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例

    今天小編就為大家分享一篇vue自定義指令實(shí)現(xiàn)僅支持輸入數(shù)字和浮點(diǎn)型的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-10-10
  • VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)

    VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表(1)

    這篇文章主要為大家詳細(xì)介紹了VUEJS實(shí)戰(zhàn)之構(gòu)建基礎(chǔ)并渲染出列表,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-06-06
  • Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能

    Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能

    今天小編就為大家分享一篇Vuex實(shí)現(xiàn)數(shù)據(jù)增加和刪除功能,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 詳解vue父子組件間傳值(props)

    詳解vue父子組件間傳值(props)

    本篇文章主要介紹了詳解vue父子組件間傳值(props),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-06-06
  • vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13)解決辦法

    vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13

    這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目導(dǎo)入異常Error:@vitejs/PLUGIN-vue?requires?vue?(>=3.2.13)的解決辦法,文中將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • 一步步教你利用webpack如何搭一個vue腳手架(超詳細(xì)講解和注釋)

    一步步教你利用webpack如何搭一個vue腳手架(超詳細(xì)講解和注釋)

    這篇文章主要給大家介紹了軟玉利用webpack如何搭一個vue腳手架的相關(guān)資料,文中有超詳細(xì)講解和注釋,對大家學(xué)習(xí)或者使用webpack具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
    2018-01-01
  • Vue中this.$nextTick的作用及用法

    Vue中this.$nextTick的作用及用法

    在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法,有需要的朋友們可以跟著學(xué)習(xí)參考下。
    2020-02-02
  • Vue.js的Mixins使用方式

    Vue.js的Mixins使用方式

    Vue.js的Mixins功能允許封裝可復(fù)用的組件選項(xiàng),實(shí)現(xiàn)代碼復(fù)用和模塊化,Mixins可以包含數(shù)據(jù)、方法、生命周期鉤子等組件選項(xiàng),使用時,Mixins中的選項(xiàng)會被混入組件中,優(yōu)先級低于組件自身選項(xiàng),優(yōu)點(diǎn)包括代碼復(fù)用、高靈活性和簡單易用
    2024-09-09
  • DataV?全屏容器組件源碼解析

    DataV?全屏容器組件源碼解析

    這篇文章主要為大家介紹了DataV?全屏容器組件源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-04-04
  • Vue3(二)集成Ant Design Vue

    Vue3(二)集成Ant Design Vue

    上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目(一),接下來就來看看Vue3集成Ant Design Vue 的相關(guān)資料,需要的小伙伴可以參考一下文章的具體內(nèi)容
    2021-10-10

最新評論