您好,登錄后才能下訂單哦!
provide與inject如何在vue項(xiàng)目中使用?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來學(xué)習(xí)下,希望你能有所收獲。
provider/inject:簡(jiǎn)單的來說就是在父組件中通過provider來提供變量,然后在子組件中通過inject來注入變量。
需要注意的是這里不論子組件有多深,只要調(diào)用了inject那么就可以注入provider中的數(shù)據(jù)。而不是局限于只能從當(dāng)前父組件的prop屬性來獲取數(shù)據(jù)。
first:定義一個(gè)parent component
<template> <div> <childOne></childOne> </div> </template> <script> import childOne from '../components/test/ChildOne' export default { name: "Parent", provide: { for: "demo" }, components:{ childOne } }
在這里我們?cè)诟附M件中provide for這個(gè)變量。
second 定義一個(gè)子組件
<template> <div> {{demo}} <childtwo></childtwo> </div> </template> <script> import childtwo from './ChildTwo' export default { name: "childOne", inject: ['for'], data() { return { demo: this.for } }, components: { childtwo } } </script>
third 定義另一個(gè)子組件
<template> <div> {{demo}} </div> </template> <script> export default { name: "", inject: ['for'], data() { return { demo: this.for } } } </script>
在2個(gè)子組件中我們使用jnject注入了provide提供的變量for,并將它提供給了data屬性。
這里官網(wǎng)注明例子只工作在 Vue 2.2.1 或更高版本。低于這個(gè)版本時(shí),注入的值會(huì)在 props 和 data 初始化之后得到。
運(yùn)行之后看下結(jié)果
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。