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操作input type=radio的实现代码
Jun 14 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
原生JS实现在线问卷调查投票特效
Jan 03 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
浏览器调试动态js脚本的方法(图解)
Jan 19 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
axios向后台传递数组作为参数的方法
Aug 11 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
Mar 12 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 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
一个好用的分页函数
2006/11/16 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
微信小程序获取地理位置及经纬度授权代码实例
2019/09/18 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python机器学习之神经网络(一)
2017/12/20 Python
python获取代理IP的实例分享
2018/05/07 Python
python调试神器PySnooper的使用
2019/07/03 Python
python调用matplotlib模块绘制柱状图
2019/10/18 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Python3中configparser模块读写ini文件并解析配置的用法详解
2020/02/18 Python
行政主管职责范本
2014/03/07 职场文书
小学母亲节活动方案
2014/03/14 职场文书
表彰大会策划方案
2014/05/13 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
uni-app 微信小程序授权登录的实现步骤
2022/02/18 Javascript
以MySQL5.7为例了解一下执行计划
2022/04/13 MySQL
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL