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

vue3中?provide?和?inject?用法及原理

 更新時間:2021年11月27日 10:40:34   作者:前端人  
這篇文章主要介紹vue3中?provide?和?inject?用法及原理,provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題,下面文章是具體的用法和實現(xiàn)原理,具有一定的參考價值,需要的朋友可以參考一下,希望對大家有所幫助

前言:

在父子組件傳遞數(shù)據(jù)時,通常使用的是 props 和 emit,父傳子時,使用的是 props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩。

像這種情況,可以使用 provide inject 解決這種問題,不論組件嵌套多深,父組件都可以為所有子組件或?qū)O組件提供數(shù)據(jù),父組件使用 provide 提供數(shù)據(jù),子組件或?qū)O組件 inject 注入數(shù)據(jù)。同時兄弟組件之間傳值更方便。

一、Vue2 的 provide / inject 使用

provide :是一個對象,里面是屬性和值。如:

provide:{

 info:"值"

}

如果 provide 需要使用 data 內(nèi)的數(shù)據(jù)時,這樣寫就會報錯。訪問組件實例 property 時,需要將 provide 轉(zhuǎn)換為返回對象的函數(shù)。

provide(){

 return{

  info: this.msg

 }

}

inject :是一個字符串?dāng)?shù)組。如:

inject: [ 'info' ]

接收上邊 provide 提供的 info 數(shù)據(jù),也可以是一個對象,該對象包含 from 和 default 屬性,from 是可用做的注入內(nèi)容中搜索用的 key,default 屬性是指定默認(rèn)值。

在 vue2 中 project / inject 應(yīng)用:

//父組件

export default{

 provide:{

  info:"提供數(shù)據(jù)"

 }

}

//子組件

export default{

 inject:['info'],

 mounted(){

     console.log("接收數(shù)據(jù):", this.info) // 接收數(shù)據(jù):提供數(shù)據(jù)

 }

} 

provide / inject 類似于消息的訂閱和發(fā)布。provide 提供或發(fā)送數(shù)據(jù), inject 接收數(shù)據(jù)。

二、Vue3 的 provide / inject 使用

在組合式 API 中使用 provide/inject,兩個只能在 setup 期間調(diào)用,使用之前,必須從 vue 顯示導(dǎo)入 provide/inject 方法。

provide 函數(shù)接收兩個參數(shù):

provide( name,value )

  • name:定義提供 property name 。
  • valueproperty 的值。

使用時:

import { provide } from "vue"

export default {

  setup(){

    provide('info',"值")

  }

}

inject 函數(shù)有兩個參數(shù):

inject(name,default)

  • name:接收 provide 提供的屬性名。
  • default:設(shè)置默認(rèn)值,可以不寫,是可選參數(shù)。

使用時:

import { inject } from "vue"

export default {

  setup(){

    inject('info',"設(shè)置默認(rèn)值")

  }

}

完整實例1provide/inject實例

//父組件代碼

<script>

import { provide } from "vue"

export default {

  setup(){

    provide('info',"值")

  }

}

</script>

//子組件 代碼

<template>

 {{info}}

</template>

<script>

import { inject } from "vue"

export default {

  setup(){

    const info = inject('info')

    return{

      info

    }

  }

}

</script>

三、添加響應(yīng)性

為了給 provide/inject 添加響應(yīng)性,使用 ref reactive 。

完整實例2provide/inject 響應(yīng)式

//父組件代碼

<template>

  <div>

    info:{{info}}

    <InjectCom ></InjectCom>

  </div>

</template>

<script>

import InjectCom from "./InjectCom"

import { provide,readonly,ref } from "vue"

export default {

  setup(){

    let info = ref("今天你學(xué)習(xí)了嗎?")

    setTimeout(()=>{

      info.value = "不找借口,立馬學(xué)習(xí)"

    },2000)

    provide('info',info)

    return{

      info

    }

  },

  components:{

    InjectCom

  }

}

</script>

// InjectCom 子組件代碼

<template>

 {{info}}

</template>

<script>

import { inject } from "vue"

export default {

  setup(){

    const info = inject('info')

    setTimeout(()=>{

      info.value = "更新"

    },2000)

    return{

      info

    }

  }

}

</script>

上述示例,在父組件或子組件都會修改 info 的值。

provide / inject 類似于消息的訂閱和發(fā)布,遵循 vue 當(dāng)中的單項數(shù)據(jù)流,什么意思呢?就是數(shù)據(jù)在哪,修改只能在哪,不能在數(shù)據(jù)傳遞處修改數(shù)據(jù),容易造成狀態(tài)不可預(yù)測。

在訂閱組件內(nèi)修改值的時候,可以被正常修改,如果其他組件也使用該值的時候,狀態(tài)容易造成混亂,所以需要在源頭上規(guī)避問題。

readonly 只讀函數(shù),使用之前需要引入,如果給變量加上 readonly 屬性,則該數(shù)據(jù)只能讀取,無法改變,被修改時會發(fā)出警告,但不會改變值。

使用方法:

import { readonly } from "vue"

let info = readonly('只讀info值')

setTimout(()=>{

 info="更新info" //兩秒后更新info的值

},2000)

運行兩秒后,瀏覽器發(fā)出警告,提示 info 值不可修改。

所以我們就給provide發(fā)射出去的數(shù)據(jù),添加一個只讀屬性,避免發(fā)射出去的數(shù)據(jù)被修改。

完整實例2的 provide 處添加 readonly 。

provide('info', readonly(info))

在子組件修改值的時候,會有一個只讀提醒。

修改值的時候,還是需要在 provide 發(fā)布數(shù)據(jù)的組件內(nèi)修改數(shù)據(jù),所以會在組件內(nèi)添加修改方法,同時也發(fā)布出去,在子組件處調(diào)用就可以了。

如:

//發(fā)布

let info = ref("今天你學(xué)習(xí)了嗎?")

const changeInfo = (val)=>{

 info.value = val

}

provide('info',readonly(info))

provide('changeInfo',changeInfo)



//訂閱

const chang = inject('changeInfo')

chang('沖向前端工程師')

完整示例3:修改數(shù)據(jù)

// 父組件代碼

<template>

  <div>

    info:{{info}}

    <InjectCom ></InjectCom>

  </div>

</template>



<script>

import InjectCom from "./InjectCom"

import { provide,readonly,ref } from "vue"

export default {

  setup(){

    let info = ref("今天你學(xué)習(xí)了嗎?")

    const changeInfo = (val)=>{

      info.value = val

    }

    provide('info',readonly(info))

    provide('changeInfo',changeInfo)

    return{

      info

    }

  },

  components:{

    InjectCom

  }

}

</script>



//InjectCom 子組件代碼

<template>

  <div>

    <button @click="chang('沖向前端工程師')">更新值</button>

  </div>

</template>

<script>

import { inject } from "vue"

export default {

  setup(){

    const info = inject('info')

    const chang = inject('changeInfo')

    return{

      info,

      chang

    }

  }

}

</script>
 

到此這篇關(guān)于vue3provide inject 用法及原理的文章就介紹到這了,更多相關(guān) vue3 中provide 和 inject 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • VUE前端實現(xiàn)token的無感刷新方式

    VUE前端實現(xiàn)token的無感刷新方式

    這篇文章主要介紹了VUE前端實現(xiàn)token的無感刷新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue3插槽:el-table表頭插入tooltip及更換表格背景色方式

    vue3插槽:el-table表頭插入tooltip及更換表格背景色方式

    這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-06-06
  • Vue指令實現(xiàn)OutClick的示例

    Vue指令實現(xiàn)OutClick的示例

    在一般業(yè)務(wù)中監(jiān)聽的最多的就是 Click 事件,但是在一些業(yè)務(wù)比如 Alert 和 Pop 效果時,需要監(jiān)聽在元素外部的點擊來關(guān)閉彈窗。
    2020-11-11
  • Vue form表單動態(tài)添加組件實戰(zhàn)案例

    Vue form表單動態(tài)添加組件實戰(zhàn)案例

    這篇文章主要介紹了Vue form表單動態(tài)添加組件實戰(zhàn)案例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-09-09
  • Vue3 AST解析器-源碼解析

    Vue3 AST解析器-源碼解析

    這篇文章我們從 ast 生成時調(diào)用的 baseParse 函數(shù)分析,再到 baseParse 返回 createRoot 的調(diào)用結(jié)果,一直到細(xì)化的講解了 parseChildren 解析子節(jié)點函數(shù)中的其中某一個具體解析器的執(zhí)行過程。最后通過一個簡單模板舉例,需要的朋友可以參考下
    2021-09-09
  • vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載

    vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載

    學(xué)了vue寫項目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時間。本文主要介紹了vue3.0+vite2實現(xiàn)動態(tài)異步組件懶加載,感興趣的可以了解一下
    2021-06-06
  • vue實現(xiàn)帶小數(shù)點的星星評分

    vue實現(xiàn)帶小數(shù)點的星星評分

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)帶小數(shù)點的星星評分,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • Vue子組件向父組件傳值示范方法

    Vue子組件向父組件傳值示范方法

    這篇文章主要介紹了Vue子組件向父組件傳值方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-03-03
  • 在Linux服務(wù)器上部署vue項目

    在Linux服務(wù)器上部署vue項目

    這篇文章介紹了在Linux服務(wù)器上部署vue項目的方法,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-11-11
  • vue、uniapp實現(xiàn)組件動態(tài)切換效果

    vue、uniapp實現(xiàn)組件動態(tài)切換效果

    在Vue中,通過使用動態(tài)組件,我們可以實現(xiàn)組件的動態(tài)切換,從而達(dá)到頁面的動態(tài)展示效果,這篇文章主要介紹了vue、uniapp實現(xiàn)組件動態(tài)切換,需要的朋友可以參考下
    2023-10-10

最新評論