快捷導(dǎo)航

vue父子組件的數(shù)據(jù)傳遞示例

更新時(shí)間：2017年03月07日 17:20:27 作者：luckylqh

這篇文章主要介紹了vue父子組件的數(shù)據(jù)傳遞示例,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.父組件向子組件傳遞數(shù)據(jù)

<div id="box">
  <aaa></aaa>
</div>

<template id="aaa">
  <h1>模板aaa=>{{msg1}}</h1>  //msg1寫在這里是可以的，因?yàn)檫@是父組件內(nèi)部
  //<bbb>{{msg1}}</bbb>     //這種寫法是不可以的，這是在子組件內(nèi)部，要在這里顯示父組件的數(shù)
                //據(jù)，需要用props定義屬性
  <bbb :m='msg1'></bbb>
</template>

var vm=new Vue({
  el:"#box",
  data () {
    a:'aaa'
  },
  components:{
    'aaa':{
      data () {
        msg1:'父組件的數(shù)據(jù)'
      },
      template:'#aaa',
      components:{
        'bbb':{
        // props:['m'],    //這是一種寫法，props以數(shù)組的形式定義屬性
        props：{
          'm':String      //這是第二種寫法，對(duì)象的形式
        },
          template:'<h3>這是子組件bbb--{{m}}</h3>'
        }
      }
    },
  }
})

從這個(gè)例子中可以看出，父組件向子組件傳遞數(shù)據(jù)，因?yàn)槊恳粋€(gè)組件都是獨(dú)立的作用域，所以要把父組件的數(shù)據(jù)在子組件中顯示，要使用props定義屬性來(lái)綁定父組件里面的數(shù)據(jù)才可以，如這里父組件的數(shù)據(jù)是msg1，用props定義一個(gè)屬性m，來(lái)接收數(shù)據(jù)msg1；在子組件的模板里面用{{m}}的形式顯示父組件的數(shù)據(jù)

父組件不僅可以向子組件傳遞數(shù)據(jù)，也可以傳遞方法，如：

<edit-issue :title='issueTitle' :is-show.sync='modelIssue' :model-type.sync='modeltype' :issue-datas='listdb' :user.sync='users' :projects="projectDatas" :get-datas="getCreateIssues" :localtoken="localtokenId" :user-    name="userName" :token-data="tokendata">
</edit-issue>

這是一個(gè)子組件，引用在父組件中，其中的 :get-datas=”getCreateIssues” 接收的是一個(gè)方法，這個(gè)方法在父組件中從后臺(tái)獲取數(shù)據(jù)傳遞給子組件，在子組件中就可以展示這些數(shù)據(jù)，

methods:{
  getCreateIssues(){        //這是es6的格式
    this.$http.get(url,data).then(res=>{}) //這也是es6的格式
  }
}

在子組件中

復(fù)制代碼代碼如下:

 props:['executorsData','isShow','modelType','issueDatas','user','projects','title','getDatas','getEditData','localtoken',"userName","tokenData"],

getDatas就是從父組件中接收數(shù)據(jù)的方法，對(duì)應(yīng)上面的 :get-datas=”getCreateIssues”，在子組件可以直接使用getDatas這個(gè)方法，如：

methods:{
  okConfirm(){
      issueApi.delIssue(this.delId).then(res=>{
        if(res.data.code==0){
          this.successPop('刪除成功');
          this.openConfirm=false;
          this.isShow=false;
          //這里就是使用的父組件的方法
          this.getDatas();    
          //end
          this.$dispatch('fetchList');
        }else{
          this.warningPop(res.data.message)
        }
      })
    },
}

2.子組件向父組件傳遞數(shù)據(jù)

這里寫圖片描述

在子組件中選擇條件后，在父組件中執(zhí)行搜索功能

<div class="task-btn">
  <p @click="clear()">清空</p>
  <p @click="confirm(modalData)">搜索</p>
  //modalData是需要向后臺(tái)發(fā)送的數(shù)據(jù)
</div>

export default{
  props:['confirm']，
  data(){
    return {
      modalData：{ProjVerName:''}     
    }
  }
}

定義一個(gè)confirm方法接收父組件中的方法，這里從子組件向父組件傳遞數(shù)據(jù)不是按照教程上的方法使用$emit,而是直接把數(shù)據(jù)作為參數(shù)傳遞到方法中，在父組件中這樣使用：

 <issuesearch :confirm="search" :showtotal.sync="showtotal" :is-re-get.sync="isReGet" :type="chosenType">
 </issuesearc>

data(){
  return {
    searchData:{
      ProjVerName:'',
    }
  }
},
methods:{
  search(data){   //data就是接收子組件傳遞過(guò)來(lái)的數(shù)據(jù)的形參
    this.searchData.ProjVerName=data.ProjVerName；
    this.$http.get(url,this.searchData.ProjVerName).then(res=>{
    console.log(res)
})
  }
}

這種方法就是從子組件向父組件傳遞數(shù)據(jù)，

從子組件向父組件傳遞方法，需要使用$dispatch,如：

這里寫圖片描述

在子組件中點(diǎn)擊保存以后，這個(gè)彈出框消失，父組件中需要獲取一遍最新數(shù)據(jù)，這種情況就需要把這個(gè)保存事件發(fā)送出去，讓父組件知道，用法：

復(fù)制代碼代碼如下:

<div class="creator-btn fr margintop" @click="save()" v-if="(modelType=='edit')&&(issueDatas.state!==5)">保存</div>

methods:{
  save (){
    this.$http.post(url,data).then(res=>{
      console.log('保存成功');
      this.$route.router.go({
        name:'issues.issueList'
      });  //保存完以后跳轉(zhuǎn)到對(duì)應(yīng)的路由
      this.$dispatch('disSave')  //這里把保存事件發(fā)送出去
    })
  }
}

在父組件中使用events來(lái)接收這個(gè)事件，并執(zhí)行一些動(dòng)作，如：

events:{
 disSave(){  //這就是接收的子組件的方法
   this.getCreateIssues(); //接收完以后調(diào)用一個(gè)方法獲取一遍數(shù)據(jù)，這樣就實(shí)現(xiàn)了在子組件中點(diǎn)擊保存后，父組件能直接獲取到最新的數(shù)據(jù)
 }
},

關(guān)于子組件向父組件傳遞數(shù)據(jù)也可以使用教程里的方法，使用$emit

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: