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

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

这种方法就是从子组件向父组件传递数据,

从子组件向父组件传递方法,需要使用$dispatch,如:

在子组件中点击保存以后,这个弹出框消失,父组件中需要获取一遍最新数据,这种情况就需要把这个保存事件发送出去,让父组件知道,用法:

复制代码 代码如下:
<p class="creator-btn fr margintop" @click="save()" v-if="(modelType=='edit')&&(issueDatas.state!==5)">保存</p>

methods:{
  save (){
    this.$http.post(url,data).then(res=>{
      console.log('保存成功');
      this.$route.router.go({
        name:'issues.issueList'
      });  //保存完以后跳转到对应的路由
      this.$dispatch('disSave')  //这里把保存事件发送出去
    })
  }
}

在父组件中使用events来接收这个事件,并执行一些动作,如:

events:{
 disSave(){  //这就是接收的子组件的方法
   this.getCreateIssues(); //接收完以后调用一个方法获取一遍数据,这样就实现了在子组件中点击保存后,父组件能直接获取到最新的数据
 }
},

关于子组件向父组件传递数据也可以使用教程里的方法,使用$emit

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