您好,登錄后才能下訂單哦!
這篇文章主要講解了“vue的傳值方式有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“vue的傳值方式有哪些”吧!
本文操作環(huán)境:windows7系統(tǒng)、vue2.5.17版,DELL G3電腦。
vue傳值方式有哪些?
Vue中常用的三種傳值方式
父?jìng)髯?/strong>
父子組件的關(guān)系可以總結(jié)為prop向下傳遞,事件向上傳遞。父組件通過(guò)prop給子組件下發(fā)數(shù)據(jù),子組件通過(guò)事件給父組件發(fā)送消息。
父組件:
<template> <p> 父組件: <input type="text" v-model="name"> <br> <br> <!-- 引入子組件 --> <child :inputName="name"></child> //child子組件通過(guò) :inputName="name" 將值傳過(guò)去 </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } } } </script>
子組件:
<template> <p> 子組件: <span>{{inputName}}</span> </p> </template> <script> export default { // 接受父組件的值 props: { inputName: String, //在這里對(duì)傳過(guò)來(lái)的進(jìn)行接收 required: true } } </script>
子傳父
子組件可以通過(guò)$emit觸發(fā)父組件的自定義事件。vm.$emit(event,arg) 用于觸發(fā)當(dāng)前實(shí)例上的事件;
子組件:
<template> <p> 子組件: <span>{{childValue}}</span> <!-- 定義一個(gè)子組件傳值的方法 --> <input type="button" value="點(diǎn)擊觸發(fā)" @click="childClick"> </p> </template> <script> export default { data () { return { childValue: '我是子組件的數(shù)據(jù)' } }, methods: { childClick () { // childByValue是在父組件on監(jiān)聽(tīng)的方法 // 第二個(gè)參數(shù)this.childValue是需要傳的值 this.$emit('childByValue', this.childValue) } } } </script>
父組件:
<template> <p> 父組件: <span>{{name}}</span> <br> <br> <!-- 引入子組件 定義一個(gè)on的方法監(jiān)聽(tīng)子組件的狀態(tài)--> <child v-on:childByValue="childByValue"></child> </p> </template> <script> import child from './child' export default { components: { child }, data () { return { name: '' } }, methods: { childByValue: function (childValue) { // childValue就是子組件傳過(guò)來(lái)的值 this.name = childValue } } } </script>
非父子組件傳值
非父子組件之間傳值,需要定義個(gè)公共的公共實(shí)例文件bus.js,作為中間倉(cāng)庫(kù)來(lái)傳值,不然路由組件之間達(dá)不到傳值的效果。
公共bus.js
//bus.js import Vue from 'vue' export default new Vue()
組件A:
<template> <p> A組件: <span>{{elementValue}}</span> <input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue"> </p> </template> <script> // 引入公共的bug,來(lái)做為中間傳達(dá)的工具 import Bus from './bus.js' export default { data () { return { elementValue: 4 } }, methods: { elementByValue: function () { Bus.$emit('val', this.elementValue) } } } </script>
組件B:
<template> <p> B組件: <input type="button" value="點(diǎn)擊觸發(fā)" @click="getData"> <span>{{name}}</span> </p> </template> <script> import Bus from './bus.js' export default { data () { return { name: 0 } }, mounted: function () { var vm = this // 用$on事件來(lái)接收參數(shù) Bus.$on('val', (data) => { console.log(data) vm.name = data }) }, methods: { getData: function () { this.name++ } } } </script>
感謝各位的閱讀,以上就是“vue的傳值方式有哪些”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)vue的傳值方式有哪些這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(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)容。