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

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

<template id="aaa">
  <h2>模板aaa=>{{msg1}}</h2>  //msg1寫在這里是可以的，因為這是父組件內(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      //這是第二種寫法，對象的形式
        },
          template:'<h4>這是子組件bbb--{{m}}</h4>'
        }
      }
    },
  }
})

<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>

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

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)
        }
      })
    },
}

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

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

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

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

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

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