溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
使用vue怎么實現(xiàn)父子組件間的傳值？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。
Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <counter :count="count1"></counter> <counter :count="count2"></counter> </div> <script> Vue.component("counter", { props:['count'], data(){ return{ number: this.count, } }, template: ` <p>{{count}} {{number}}</p> ` }); var app = new Vue({ el: '#app', data: { count1: 1, count2: 2, } }) </script> </body> </html>
結(jié)果如下：
上面的代碼中我們定義了一個 counter 組件，并在 HTML 內(nèi)插入了兩次，分別通過 :count = "" 的方式將父組件內(nèi)的 count1 和 count2 傳入，然后我們在 counter 組件內(nèi)通過 props 屬性將 count 屬性接住，這樣我們就將父組件的值傳遞給了子組件。我們就可以在 template 的模板中將傳過來的 count 數(shù)據(jù)插入，我們也可以在子組件的 data 內(nèi)將傳過來的 count 值賦值給一個新的變量 number。
如果從父組件傳過來的值需要參與邏輯運算時我們推薦將傳入的值重新賦值給一個變量，因為子組件不允許直接修改父組件傳過來的值，我們可以將傳入的值賦值給新的變量，然后將該變量再傳給父組件來修改父組件的值。如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<counter :count="count1" @change="handleChange"></counter>
<counter :count="count2" @change="handleChange"></counter>
<p>{{total}}</p>
</div>
<script>
Vue.component("counter", {
props: ['count'],
data() {
return {
number: this.count,
}
},
methods: {
handleClick() {
this.number++;
this.$emit('change', 1)
}
},
template: `
<p @click="handleClick">{{number}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2,
total: 3,
},
methods: {
handleChange(number) {
this.total = this.total + number
}
}
})
</script>
</body>
</html>在以上代碼中，我們在父組件中定義了一個 total 數(shù)據(jù)，初始值為 count1 + count2 的和。我們在子組件內(nèi)定義了一個 handleClick() 的方法，讓父組件傳過來的 count 值每次都 +1，我們還在 handleClick() 的方法內(nèi)定義了 this.emit( ′ change ′ ,1)的方法，它的意思是子組件通過 emit(′change′,1)的方法，它的意思是子組件通過emit 屬性向外觸發(fā)一個 change 事件，并且攜帶了一個參數(shù) 1，然后我們在 HTML 的 <counter> 標簽內(nèi)在父組件的 methods 屬性內(nèi)通過 handleChange() 方法監(jiān)聽這個 change 事件，即 @change 和 $emit 的事件名稱自己定義，只要名稱一致即可。在 handleChange() 方法內(nèi)接收從子組件通過 change 事件傳過來的參數(shù) 1，讓后讓 total 數(shù)據(jù)加上這個參數(shù) 1 即可實現(xiàn)一個簡單的累加計算。
以上便是子組件向父組件傳值的過程，結(jié)果如下：
從上面的例子我們已經(jīng)實現(xiàn)了父子組件間的相互傳值，是通過 change 事件將每次累加的數(shù)值 1 傳給父組件，通過數(shù)據(jù)的方式修改 total 值，Vue 官方建議我們盡量通過數(shù)據(jù)的方式而不是操作 DOM 的方式來實現(xiàn)操作，但是在極端條件下我們必須要操作 DOM 來實現(xiàn)，Vue 也為我們提供操作 DOM 的方法，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<counter :count="count1" @change="handleChange" ref="one"></counter>
<counter :count="count2" @change="handleChange" ref="two"></counter>
<p>{{total}}</p>
</div>
<script>
Vue.component("counter", {
props: ['count'],
data() {
return {
number: this.count,
}
},
methods: {
handleClick() {
this.number++;
this.$emit('change')
}
},
template: `
<p @click="handleClick">{{number}}</p>
`
});
var app = new Vue({
el: '#app',
data: {
count1: 1,
count2: 2,
total: 3,
},
methods: {
handleChange() {
console.log(this.$refs.one);
console.log(this.$refs.two);
this.total = this.$refs.one.number + this.$refs.two.number;
}
}
})
</script>
</body>
</html>上面的代碼中，我們并沒有通過 $emit 里的 change 事件傳值給父組件，而是在 <coute> 標簽內(nèi)分別定義了 ref="one" 和 ref="two" 屬性，并且在 handleChange() 方法內(nèi)通過監(jiān)聽子組件的 change 改變時打印一下這兩個 ref 內(nèi)的值，控制臺的輸出日志如下：
里面既包含了 $el 的 DOM，還有初始值 count=1 即handleClick() 方法執(zhí)行后 number=2 的值，所以我們可以拿到 number 的值，讓兩個 number 相加即為 total 的值。
在 vue 中我們還是建議通過數(shù)據(jù)來操作而不是通過 DOM 來執(zhí)行操作。
看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼