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 相关文章推荐
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js日期相关函数总结分享
Oct 15 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
使用javascript实现简单的选项卡切换
Jan 09 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
Mar 04 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
jQuery解决浏览器兼容性问题案例分析
Apr 15 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
基于vue-router 多级路由redirect 重定向的问题
Sep 03 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
微信小程序:数据存储、传值、取值详解
May 07 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
如何去掉文章里的 html 语法
2006/10/09 PHP
如何判断php数组的维度
2013/06/10 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
Zend Framework框架实现类似Google搜索分页效果
2016/11/25 PHP
php图像处理函数imagecopyresampled用法详解
2016/12/02 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
IE6浏览器中window.location.href无效的解决方法
2014/11/20 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
微信小程序 教程之模块化
2016/10/17 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
Nodejs技巧之Exceljs表格操作用法示例
2019/11/06 NodeJs
[01:36:57]【09DOTA2第一视角】小骷髅
2014/04/16 DOTA
Python爬虫DNS解析缓存方法实例分析
2017/06/02 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
Python3.x爬虫下载网页图片的实例讲解
2018/05/22 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
澳大利亚巧克力花束和礼品网站:Tastebuds
2019/03/15 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
个人课题方案
2014/05/08 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
创业方案:赚钱的烧烤店该怎样做?
2019/07/05 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript