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


Posted in Javascript onMarch 07, 2017

1.父组件向子组件传递数据

<div id="box">
  <aaa></aaa>
</div>
<template id="aaa">
  <h1>模板aaa=>{{msg1}}</h1>  //msg1写在这里是可以的,因为这是父组件内部
  //<bbb>{{msg1}}</bbb>     //这种写法是不可以的,这是在子组件内部,要在这里显示父组件的数
                //据,需要用props定义属性
  <bbb :m='msg1'></bbb>
</template>
var vm=new Vue({
  el:"#box",
  data () {
    a:'aaa'
  },
  components:{
    'aaa':{
      data () {
        msg1:'父组件的数据'
      },
      template:'#aaa',
      components:{
        'bbb':{
        // props:['m'],    //这是一种写法,props以数组的形式定义属性
        props:{
          'm':String      //这是第二种写法,对象的形式
        },
          template:'<h3>这是子组件bbb--{{m}}</h3>'
        }
      }
    },
  }
})

从这个例子中可以看出,父组件向子组件传递数据,因为每一个组件都是独立的作用域,所以要把父组件的数据在子组件中显示,要使用props定义属性来绑定父组件里面的数据才可以,如这里父组件的数据是msg1,用props定义一个属性m,来接收数据msg1;在子组件的模板里面用{{m}}的形式显示父组件的数据

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

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

2.子组件向父组件传递数据

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

在子组件中选择条件后,在父组件中执行搜索功能

<div class="task-btn">
  <p @click="clear()">清空</p>
  <p @click="confirm(modalData)">搜索</p>
  //modalData是需要向后台发送的数据
</div>
export default{
  props:['confirm'],
  data(){
    return {
      modalData:{ProjVerName:''}     
    }
  }
}

定义一个confirm方法接收父组件中的方法,这里从子组件向父组件传递数据不是按照教程上的方法使用$emit,而是直接把数据作为参数传递到方法中,在父组件中这样使用:

<issuesearch :confirm="search" :showtotal.sync="showtotal" :is-re-get.sync="isReGet" :type="chosenType">
 </issuesearc>
data(){
  return {
    searchData:{
      ProjVerName:'',
    }
  }
},
methods:{
  search(data){   //data就是接收子组件传递过来的数据的形参
    this.searchData.ProjVerName=data.ProjVerName;
    this.$http.get(url,this.searchData.ProjVerName).then(res=>{
    console.log(res)
})
  }
}

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

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

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

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

<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'
      });  //保存完以后跳转到对应的路由
      this.$dispatch('disSave')  //这里把保存事件发送出去
    })
  }
}

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Object对象 学习
Jul 12 Javascript
JavaScript 学习初步 入门教程
Mar 25 Javascript
instanceof和typeof运算符的区别详解
Jan 06 Javascript
JS中类或对象的定义说明
Mar 10 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
Jquery Datatables的使用详解
Jan 30 jQuery
JS异步宏队列与微队列原理区别详解
Jul 02 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 #Javascript
完美实现js焦点轮播效果(一)
Mar 07 #Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
You might like
php中static静态变量的使用方法详解
2010/06/04 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
一组PHP可逆加密解密算法实例代码
2014/01/21 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
jQuery mobile 移动web(6)
2015/12/20 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
JS代码实现根据时间变换页面背景效果
2016/06/16 Javascript
原生JS实现简单放大镜效果
2017/02/08 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
基于scrapy实现的简单蜘蛛采集程序
2015/04/17 Python
在Python中编写数据库模块的教程
2015/04/29 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
python机器学习库xgboost的使用
2020/01/20 Python
python关于倒排列的知识点总结
2020/10/13 Python
Python descriptor(描述符)的实现
2020/11/15 Python
公司员工检讨书
2014/02/08 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
先进事迹报告会主持词
2014/04/02 职场文书
小学生寒假家长评语
2014/04/16 职场文书
初三学生评语大全
2014/04/24 职场文书
婚前协议书范本
2014/10/27 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书