快捷導(dǎo)航

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

更新時(shí)間：2018年08月16日 09:52:42 作者：lander_xiong

在Vue的框架開發(fā)的項(xiàng)目過程中，經(jīng)常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。下面通過本文給大家介紹Vue開發(fā)中常用的三種傳值方式父傳子、子傳父、非父子組件傳值，需要的朋友參考下吧

Vue2.0 傳值方式：

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

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

•父傳子

•子傳父

•非父子傳值

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

這里寫圖片描述

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

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>
  <!-- 定義一個子組件傳值的方法 -->
  <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)聽的方法
    // 第二個參數(shù)this.childValue是需要傳的值
    this.$emit('childByValue', this.childValue)
   }
  }
 }
</script>

父組件：

<template>
 <div>
  父組件:
  <span>{{name}}</span>
  <br>
  <br>
  <!-- 引入子組件 定義一個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)行傳值

非父子組件之間傳值，需要定義個公共的公共實(shí)例文件bus.js，作為中間倉庫來傳值，不然路由組件之間達(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中三種常用傳值方式(父傳子、子傳父、非父子組件傳值)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: