快捷導(dǎo)航

vue2.0父子組件間傳遞數(shù)據(jù)的方法

更新時(shí)間：2018年08月16日 09:59:06 作者：5649498

本文通過一個(gè)小例子給大家介紹了vue2.0父子組件間傳遞數(shù)據(jù)的方法，需要的朋友參考下吧

關(guān)于父子組件之間傳遞數(shù)據(jù)其實(shí)文檔上都說得很明白。

但是如果完全不懂的人做計(jì)也看不懂，下面是一個(gè)小例子，有兩個(gè)文件

1.parent.vue

<template>
 <child :child-msg="msg" @ok="event"></child>
</template>
<script>
import child from './child.vue';
export default {
 data(){
  return{
   msg:'hello worldgogo'
  }
 },
 components:{
  child
 },
 methods:{
  event(val){
    console.log(val);
  }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.child.vue

<template>
  <p>{{childMsghello}}</p>
</template>
<script>
export default {
  props: ['childMsg'],
  data(){
    return{
      childMsghello:this.childMsg+'this is child'
    }
  },
  created(){
    //自定義事件，并且給監(jiān)聽此事件的回調(diào)函數(shù)的值設(shè)為200
    this.$emit('ok','200');
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
Vue?github用戶搜索案例分享
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2022-04-04
vue3+elementplus 樹節(jié)點(diǎn)過濾功能實(shí)現(xiàn)
樹節(jié)點(diǎn)所展示的街道是讀取的成都市金牛區(qū)的范圍邊界線的json文件,街道下對應(yīng)內(nèi)容市通過fetch調(diào)用接口獲取的內(nèi)容,通過mapTreeData函數(shù)循環(huán)遍歷,對數(shù)據(jù)進(jìn)行處理,這篇文章主要介紹了vue3+elementplus 樹節(jié)點(diǎn)過濾功能實(shí)現(xiàn),需要的朋友可以參考下
2024-05-05
vue按住shift鍵多選方式(以element框架的table為例)
這篇文章主要介紹了vue按住shift鍵多選方式(以element框架的table為例),具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
v-distpicker地區(qū)選擇器組件使用實(shí)例詳解
代碼添加了一個(gè)vDistpickerHandle的事件處理函數(shù)對地區(qū)選擇器中的數(shù)據(jù)進(jìn)行處理,將數(shù)據(jù)存儲到form對象的相應(yīng)屬性中,方便數(shù)據(jù)提交,這篇文章主要介紹了v-distpicker地區(qū)選擇器組件使用,需要的朋友可以參考下
2024-02-02
詳解vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地文件
這篇文章主要為大家詳細(xì)介紹了vue2如何實(shí)現(xiàn)點(diǎn)擊預(yù)覽本地的word、excle、pdf文件,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-04-04
vue3二次封裝element-ui中的table組件的過程詳解
這篇文章主要給大家介紹了vue3二次封裝element-ui中的table組件的過程,文中通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友跟著小編一起來學(xué)習(xí)吧
2024-01-01
Vue安裝Element?Plus全過程
這篇文章主要介紹了Vue安裝Element?Plus全過程,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
解決vue項(xiàng)目 build之后資源文件找不到的問題
這篇文章主要介紹了解決vue項(xiàng)目 build之后資源文件找不到的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue如何通過插槽組件之間數(shù)據(jù)傳遞
這篇文章主要介紹了vue如何通過插槽組件之間數(shù)據(jù)傳遞問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06