Vue2.0組件間數(shù)據(jù)傳遞示例

更新時(shí)間：2017年03月07日 16:58:41 作者：Zsmile

本篇文章主要介紹了Vue2.0組件間數(shù)據(jù)傳遞示例，組件間數(shù)據(jù)傳遞主要是父子組件之間傳遞，具有一定的參考價(jià)值，有興趣的可以了解一下。

Vue1.0組件間傳遞

使用$on()監(jiān)聽(tīng)事件；
使用$emit()在它上面觸發(fā)事件；
使用$dispatch()派發(fā)事件，事件沿著父鏈冒泡；
使用$broadcast()廣播事件，事件向下傳導(dǎo)給所有的后代

Vue2.0后$dispatch()，$broadcast()被棄用，見(jiàn)https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替換

1，父組件向子組件傳遞場(chǎng)景：Father上一個(gè)輸入框，根據(jù)輸入傳遞到Child組件上。

父組件：

<template>
 <div>
  <input type="text" v-model="msg">
  <br>
  //將子控件屬性inputValue與父組件msg屬性綁定
  <child :inputValue="msg"></child>
 </div>
</template>
<style>

</style>
<script>
 export default{
  data(){
   return {
    msg: '請(qǐng)輸入'
   }
  },
  components: {
   child: require('./Child.vue')
  }
 }
</script>

子組件：

<template>
 <div>
  <p>{{inputValue}}</p>
 </div>
</template>
<style>

</style>
<script>
  export default{
    props: {
     inputValue: String
    }
  }
</script>

2，子組件向父組件傳值場(chǎng)景：子組件上輸入框，輸入值改變后父組件監(jiān)聽(tīng)到，彈出彈框

父組件：

<template>
 <div>
//message為子控件上綁定的通知；recieveMessage為父組件監(jiān)聽(tīng)到后的方法
  <child2 v-on:message="recieveMessage"></child2>
 </div>
</template>
<script>
 import {Toast} from 'mint-ui'
 export default{
  components: {
   child2: require('./Child2.vue'),
   Toast
  },
  methods: {
   recieveMessage: function (text) {
    Toast('監(jiān)聽(tīng)到子組件變化'+text);
   }
  }
 }
</script>

子組件：

<template>
 <div>
  <input type="text" v-model="msg" @change="onInput">
 </div>
</template>
<script>
 export default{
  data(){
   return {
    msg: '請(qǐng)輸入值'
   }
  },
  methods: {
   onInput: function () {
    if (this.msg.trim()) {
     this.$emit('message', this.msg);
    }
   }
  }
 }
</script>

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

您可能感興趣的文章:

相關(guān)文章

Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫(huà)效果的示例
點(diǎn)贊動(dòng)畫(huà)是網(wǎng)頁(yè)評(píng)論中常見(jiàn)的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛(ài)心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛(ài)心無(wú)動(dòng)畫(huà)，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)
2021-05-05
vue3 reactive定義的引用類(lèi)型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問(wèn)題
這篇文章主要介紹了vue3 reactive定義的引用類(lèi)型直接賦值導(dǎo)致數(shù)據(jù)失去響應(yīng)式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能
在實(shí)際開(kāi)發(fā)過(guò)程中,我們經(jīng)常需要處理表格中的表單數(shù)據(jù),比如在編輯表格中的某一行數(shù)據(jù)時(shí)進(jìn)行校驗(yàn),本文給大家介紹了Vue3使用el-form嵌套el-table進(jìn)行單條數(shù)據(jù)的表單校驗(yàn)功能,文中有相關(guān)的代碼供大家參考,需要的朋友可以參考下
2024-08-08
vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法
今天小編就為大家分享一篇vuex存儲(chǔ)復(fù)雜參數(shù)(如對(duì)象數(shù)組等)刷新數(shù)據(jù)丟失的解決方法。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-11-11
詳解vue3中如何使用youtube-player
這篇文章主要為大家介紹了詳解vue3中如何使用youtube-player示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
vite環(huán)境變量配置小結(jié)
Vite環(huán)境變量配置是Vite開(kāi)發(fā)環(huán)境下重要的一環(huán),它能夠根據(jù)不同的環(huán)境變量對(duì)項(xiàng)目進(jìn)行不同的配置,使得項(xiàng)目更加靈活和可維護(hù),本文就來(lái)介紹一下vite環(huán)境變量配置小結(jié),感興趣的可以了解一下
2023-11-11
antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例
這篇文章主要介紹了antd vue table跨行合并單元格,并且自定義內(nèi)容實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
Vue3封裝全局函數(shù)式組件方法總結(jié)
函數(shù)式組件就是沒(méi)有管理任何狀態(tài),也沒(méi)有監(jiān)聽(tīng)任何傳遞給它的狀態(tài),也沒(méi)有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3封裝全局函數(shù)式組件方法的相關(guān)資料,需要的朋友可以參考下
2023-06-06
Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例
這篇文章主要介紹了Vue組件設(shè)計(jì)-滾動(dòng)置頂設(shè)計(jì)案例,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-04-04
Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作
這篇文章主要介紹了Vue項(xiàng)目中Api的組織和返回?cái)?shù)據(jù)處理的操作，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-11-11