您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue.js中怎么使用事件發(fā)射器修改組件數(shù)據(jù),具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
我們可以在Vue.js中使用道具將數(shù)據(jù)傳遞到的子組件一文中查看在Vue.js中將數(shù)據(jù)從父組件傳遞到子組件的方法。
在閱讀本文之前,您應(yīng)該具備以下幾點(diǎn):
node.js 10.x及以上版本已安裝。您可以通過在終端/命令提示符下運(yùn)行以下命令來驗(yàn)證是否執(zhí)行此操作:
node -v
代碼編輯器——推薦Visual Studio
Vue的最新版本,全球安裝在您的機(jī)器上
在您的機(jī)器上安裝了Vue CLI 3.0。要做到這一點(diǎn),首先卸載舊的CLI版本:
npm uninstall -g vue-cli
然后,安裝一個(gè)新的:
npm install -g @vue/cli
在這里下載一個(gè)Vue入門項(xiàng)目
解壓下載的項(xiàng)目
導(dǎo)航到解壓縮的文件,并運(yùn)行以下命令,以保持所有的依賴關(guān)系的最新:
npm install
通過組件傳遞數(shù)據(jù)
為了將數(shù)據(jù)值從應(yīng)用程序組件中的父組件(如app.vue)傳遞給子組件(如嵌套組件),Vue.js為我們提供了一個(gè)名為props的平臺(tái)。
可以將道具稱為自定義屬性,您可以在組件上注冊(cè),該組件允許您在父組件中定義數(shù)據(jù),為其賦值,然后將值傳遞給一個(gè)道具屬性,該屬性可以在子組件中引用。
這篇文章將向你展示這個(gè)過程的反面。為了從子組件傳遞和更新父組件中的數(shù)據(jù)值,以便所有其他嵌套組件也將被更新,我們使用emit構(gòu)造來處理事件發(fā)射和數(shù)據(jù)更新。
示例:
您將經(jīng)歷以下過程:從子組件發(fā)出事件,設(shè)置監(jiān)聽父組件以便從子組件傳遞數(shù)據(jù),最后更新數(shù)據(jù)值。
如果您從一開始就關(guān)注這篇文章,那么您將下載并在vs代碼中打開starter項(xiàng)目。這個(gè)項(xiàng)目是完成的,完整的代碼到這篇文章。
將其作為啟動(dòng)項(xiàng)目的原因是,在引入反轉(zhuǎn)過程之前,您可以嘗試一下道具概念。
開始
在該文件夾中,您將找到兩個(gè)子組件:test.vue
和test2.vue
,其父組件是app.vue
文件。 我們將使用兩個(gè)子組件的標(biāo)題來說明此事件發(fā)出方法。 您的Test.vue
文件應(yīng)如下所示:
<template> <div> <h2>Vue Top 20 Artists</h2> <ul> <li v-for="(artist, x) in artists" :key="x"> <h4>{{artist.name}}</h4> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ height: 40px; width: 100%; padding: 15px; border: 1px solid saddlebrown; display: flex; justify-content: center; align-items: center; } a { color: #42b983; } </style>
要使標(biāo)題從數(shù)據(jù)屬性部分中的隱式定義中接收標(biāo)題,請(qǐng)創(chuàng)建數(shù)據(jù)部分并添加定義,然后在模板中添加插值符號(hào),如下所示:
<template> <div> <h2>{{header}}</h2> <ul> <li v-for="(artist, x) in artists" :key="x"> <h4>{{artist.name}}</h4> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } }, data() { return { header: 'Vue Top Artists' } } } </script>
如果您運(yùn)行應(yīng)用程序,您將得到與開始時(shí)完全相同的接口。下一步是在click
上更改這個(gè)已定義的屬性。
切換標(biāo)題
要切換標(biāo)題,您必須在單擊時(shí)將事件偵聽器添加到標(biāo)題,并指定包含將在單擊時(shí)發(fā)生的邏輯的函數(shù)。
<template> <div> <h2 v-on:click="callingFunction">{{header}}</h2> <ul> <li v-for="(artist, x) in artists" :key="x"> <h4>{{artist.name}}</h4> </li> </ul> </div> </template> <script> export default { name: 'Test', props: { artists: { type: Array } }, data() { return { header: 'Vue Top Artists' } }, methods: { callingFunction(){ this.header = "You clicked on header 1"; } } } </script>
現(xiàn)在,您的標(biāo)題更改為調(diào)用函數(shù)內(nèi)的字符串單擊。
設(shè)置發(fā)射器
在此階段,您希望將相同的行為傳遞給父組件,以便在單擊時(shí),父組件中嵌套的每個(gè)標(biāo)題都將更改。
為此,您將創(chuàng)建一個(gè)發(fā)射器,它將在子組件中發(fā)出一個(gè)事件,父組件可以偵聽該事件并作出響應(yīng)(這與組件的事件偵聽器邏輯相同)。
更改測(cè)試中的腳本部分。vue文件到下面的代碼塊:
<script> export default { name: 'Test', props: { artists: { type: Array }, header: { type: String } }, data() { return { // header: 'Vue Top Artists' } }, methods: { callingFunction(){ // this.header = "You clicked on header 1" this.$emit('toggle', 'You clicked header 1'); } } } </script>
在此,將標(biāo)題期望的數(shù)據(jù)類型定義為prop。 然后,在該方法中,有一個(gè)generate語(yǔ)句,告訴Vue在切換時(shí)發(fā)出事件(就像其他事件一樣,例如click事件),并將字符串作為參數(shù)傳遞。 這就是設(shè)置一個(gè)將在另一個(gè)組件中偵聽的事件的全部。
監(jiān)聽發(fā)出的事件
現(xiàn)在,創(chuàng)建事件后要做的下一件事是偵聽并響應(yīng)它。將此代碼塊復(fù)制到您的app.vue文件中:
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <Test v-bind:header="header" v-on:toggle="toggleHeader($event)" /> <Test v-bind:artists="artists" /> <test2 v-bind:header="header"/> <test2 v-bind:artists="artists" /> </div> </template> <script> import Test from './components/Test.vue' import Test2 from './components/Test2' export default { name: 'app', components: { Test, Test2 }, data (){ return { artists: [ {name: 'Davido', genre: 'afrobeats', country: 'Nigeria'}, {name: 'Burna Boy', genre: 'afrobeats', country: 'Nigeria'}, {name: 'AKA', genre: 'hiphop', country: 'South-Africa'} ], header: 'Vue Top Artists' } }, methods: { toggleHeader(x){ this.header = x; } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
在模板部分,您可以看到第一個(gè)組件test
上有兩個(gè)vue
指令。第一個(gè)是v-bind
,它將initial header
屬性綁定到artists
數(shù)組下的數(shù)據(jù)對(duì)象中的隱式定義;初始化時(shí),將顯示字符串vue top artists
。
第二個(gè)指令是v-on
,它用于監(jiān)聽事件;要監(jiān)聽的事件是toggle
(記住,您已經(jīng)在測(cè)試組件中定義了它),它的調(diào)用函數(shù)是toggleheader
。此函數(shù)已創(chuàng)建,子組件中的字符串將通過$event
參數(shù)傳遞到此處顯示。
含義
這會(huì)將數(shù)據(jù)通過發(fā)射器傳遞到父組件,因此由于其他組件嵌套在父組件中,因此每個(gè)嵌套組件中的數(shù)據(jù)都會(huì)重新呈現(xiàn)和更新。進(jìn)入test2.vue文件并將此代碼塊復(fù)制到其中:
<template> <div> <h2>{{header}}</h2> <ul> <li v-for="(artist, x) in artists" :key="x"> <h4>{{artist.name}} from {{artist.country}}</h4> </li> </ul> </div> </template> <script> export default { name: 'Test2', props: { artists: { type: Array }, header: { type: String } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> li{ height: 40px; width: 100%; padding: 15px; border: 1px solid saddlebrown; display: flex; justify-content: center; align-items: center; } a { color: #42b983; } </style>
這里,數(shù)據(jù)插值被設(shè)置并指定為道具對(duì)象中的一個(gè)字符串。在你的開發(fā)服務(wù)器上運(yùn)行應(yīng)用程序:
npm run serve
可以看到,一旦事件在父組件中被響應(yīng),所有組件都會(huì)更新它們的報(bào)頭,即使僅在一個(gè)子組件中指定了定義。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Vue.js中怎么使用事件發(fā)射器修改組件數(shù)據(jù)”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(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)容。