vue父子组件的数据传递示例

发布时间:2017-03-30 19:15 编辑:站点网

父组件不仅可以向子组件传递数据,也可以传递方法,如:

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

这是一个子组件,引用在父组件中,其中的 :get-datas=”getCreateIssues” 接收的是一个方法,这个方法在父组件中从后台获取数据传递给子组件,在子组件中就可以展示这些数据,

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

在子组件中

复制代码 代码如下:
props:['executorsData','isShow','modelType','issueDatas','user','projects','title','getDatas','getEditData','localtoken',"userName","tokenData"],

getDatas就是从父组件中接收数据的方法,对应上面的 :get-datas=”getCreateIssues”,在子组件可以直接使用getDatas这个方法,如:

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

                
更多相关内容:
    无相关信息