Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:09:46

Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)

Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值):Vue2.0 傳值方式：在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會(huì)用到組件來管理不同的功能，有一些公共的組件會(huì)被提取出來。這時(shí)必然會(huì)產(chǎn)生一些疑問和需求？比如一個(gè)組件調(diào)用另一個(gè)組件作為自己的子組件，那么我們?nèi)绾芜M(jìn)行給子組件進(jìn)行傳值呢？如果是電商網(wǎng)站系統(tǒng)的

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue2.0中三種常用傳值方式(父?jìng)髯印⒆觽鞲?、非父子組件傳值):Vue2.0 傳值方式：在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會(huì)用到組件來管理不同的功能，有一些公共的組件會(huì)被提取出來。這時(shí)必然會(huì)產(chǎn)生一些疑問和需求？比如一個(gè)組件調(diào)用另一個(gè)組件作為自己的子組件，那么我們?nèi)绾芜M(jìn)行給子組件進(jìn)行傳值呢？如果是電商網(wǎng)站系統(tǒng)的

Vue2.0 傳值方式：

在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會(huì)用到組件來管理不同的功能，有一些公共的組件會(huì)被提取出來。這時(shí)必然會(huì)產(chǎn)生一些疑問和需求？比如一個(gè)組件調(diào)用另一個(gè)組件作為自己的子組件，那么我們?nèi)绾芜M(jìn)行給子組件進(jìn)行傳值呢？如果是電商網(wǎng)站系統(tǒng)的開發(fā)，還會(huì)涉及到購(gòu)物車的選項(xiàng)，這時(shí)候就會(huì)涉及到非父子組件傳值的情況。當(dāng)然你也可以用Vuex狀態(tài)管理工具來實(shí)現(xiàn)，這部分我們后續(xù)會(huì)單獨(dú)介紹。我先給大家介紹Vue開發(fā)中常用的三種傳值方式。

Vue常用的三種傳值方式有：

•父?jìng)髯?/p>

•子傳父

•非父子傳值

引用官網(wǎng)的一句話：父子組件的關(guān)系可以總結(jié)為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息，如下圖所示：

這里寫圖片描述

接下來，我們通過實(shí)例來看可能會(huì)更明白一些：

1. 父組件向子組件進(jìn)行傳值

這里寫圖片描述

父組件：

<template>
 <div>
 父組件:
 <input type="text" v-model="name">
 <br>
 <br>
 <!-- 引入子組件 -->
 <child :inputName="name"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
 components: {
 child
 },
 data () {
 return {
 name: ''
 }
 }
 }
</script>

子組件：

<template>
 <div>
 子組件:
 <span>{{inputName}}</span>
 </div>
</template>
<script>
 export default {
 // 接受父組件的值
 props: {
 inputName: String,
 required: true
 }
 }
</script>

2. 子組件向父組件傳值

這里寫圖片描述

子組件：

<template>
 <div>
 子組件:
 <span>{{childValue}}</span>
 <!-- 定義一個(gè)子組件傳值的方法 -->
 <input type="button" value="點(diǎn)擊觸發(fā)" @click="childClick">
 </div>
</template>
<script>
 export default {
 data () {
 return {
 childValue: '我是子組件的數(shù)據(jù)'
 }
 },
 methods: {
 childClick () {
 // childByValue是在父組件on監(jiān)聽的方法
 // 第二個(gè)參數(shù)this.childValue是需要傳的值
 this.$emit('childByValue', this.childValue)
 }
 }
 }
</script>

父組件：

<template>
 <div>
 父組件:
 <span>{{name}}</span>
 <br>
 <br>
 <!-- 引入子組件 定義一個(gè)on的方法監(jiān)聽子組件的狀態(tài)-->
 <child v-on:childByValue="childByValue"></child>
 </div>
</template>
<script>
 import child from './child'
 export default {
 components: {
 child
 },
 data () {
 return {
 name: ''
 }
 },
 methods: {
 childByValue: function (childValue) {
 // childValue就是子組件傳過來的值
 this.name = childValue
 }
 }
 }
</script>

3. 非父子組件進(jìn)行傳值

非父子組件之間傳值，需要定義個(gè)公共的公共實(shí)例文件bus.js，作為中間倉(cāng)庫(kù)來傳值，不然路由組件之間達(dá)不到傳值的效果。

公共bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

組件A：

<template>
 <div>
 A組件:
 <span>{{elementValue}}</span>
 <input type="button" value="點(diǎn)擊觸發(fā)" @click="elementByValue">
 </div>
</template>
<script>
 // 引入公共的bug，來做為中間傳達(dá)的工具
 import Bus from './bus.js'
 export default {
 data () {
 return {
 elementValue: 4
 }
 },
 methods: {
 elementByValue: function () {
 Bus.$emit('val', this.elementValue)
 }
 }
 }
</script>

組件B：

<template>
 <div>
 B組件:
 <input type="button" value="點(diǎn)擊觸發(fā)" @click="getData">
 <span>{{name}}</span>
 </div>
</template>
<script>
 import Bus from './bus.js'
 export default {
 data () {
 return {
 name: 0
 }
 },
 mounted: function () {
 var vm = this
 // 用$on事件來接收參數(shù)
 Bus.$on('val', (data) => {
 console.log(data)
 vm.name = data
 })
 },
 methods: {
 getData: function () {
 this.name++
 }
 }
 }
</script>

總結(jié)

以上所述是小編給大家介紹的Vue2.0中三種常用傳值方式(父?jìng)髯?、子傳父、非父子組件傳值)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com