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 相关文章推荐
用tip解决Ext列宽度不够的问题
Dec 13 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
Node.js控制台彩色输出的方法与原理实例详解
Dec 01 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
小程序实现上传视频功能
Aug 18 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
PHP 组件化编程技巧
2009/06/06 PHP
js读写(删除)Cookie实例详解
2013/04/17 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
2016/05/12 Javascript
javascript弹出窗口中增加确定取消按钮
2016/06/24 Javascript
jQuery文字提示与图片提示效果实现方法
2016/07/04 Javascript
jQuery 获取页面li数组并删除不在数组中的key
2016/08/02 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
简单谈谈CommonsChunkPlugin抽取公共模块
2017/12/31 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
用python实现批量重命名文件的代码
2012/05/25 Python
python实现html转ubb代码(html2ubb)
2014/07/03 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
python对execl 处理操作代码
2020/06/22 Python
Python接收手机短信的代码整理
2020/08/02 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
Java方面的关于数组和继承的笔面试题
2015/09/18 面试题
区优秀教师事迹材料
2014/02/10 职场文书
办公室规章制度范本
2015/08/04 职场文书
教你用Python matplotlib库制作简单的动画
2021/06/11 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
浅析Django接口版本控制
2021/06/26 Python