vue组件之间数据传递的方法实例分析


Posted in Javascript onFebruary 12, 2019

本文实例分析了vue组件之间数据传递的方法。分享给大家供大家参考,具体如下:

1、props:父组件 -->传值到子组件

app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props

在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下:

App.vue

<template>
 <div id="app">
  <!--<router-view></router-view>-->
 <parentTochild :sex="sexVal"></parentTochild>
  </div>
</template>
<script>
 import parentTochild from './components/B'
 export default {
  name: 'app',
  data: function () {
   return {
    sexVal:"女"
   }
  },
  methods: {
  },
  components: {
   parentTochild
  }
 }
</script>

B.vue

<template>
 <div class="b_class"> <!--外边只允许有一个跟元素-->
   <p>父组件传值给子组件</p>
   <p>姓名:{{name}}</p>
   <p>年龄:{{age}}</p>
   <p>sex:{{sex}}</p>
 </div>
</template>
<script>
 export default {
  data: function () {
   return {
    name: 'zs',
    age: 22
   }
  },
  props:['sex']
 }
</script>

tips:

在父传值给子组件使用属性值:props; 理解成 “ 中介” 父组件绑定传递属性值(:sex="sexval") 子组件 获取属性值 props['sex'] 会添加到data 对象中

 vue组件之间数据传递的方法实例分析

2、$emit:子组件 -->传值到父组件

在B.vue 子组件添加一个点击事件为例子

@click="sendMs

<input type="button" @click="sendMsg" value="子组件值传父组件">

在调用该函数后使用$emit方法传递参数 (别名,在父组件作为事件名称, 值);

methods: {
   sendMsg: function () {
    this.$emit('childMsg', '值来自---子组件值')
   }
}

App.vue

在父组件中 使用该别名(作为事件名使用),调用方法 childEvent 返回子组件传过来的值

<p>{{message}}</p>
  <!--<router-view></router-view>-->
<parentTochild :sex="sexVal" @childMsg = "childEvent"></parentTochild>
data: function () {
   return {
    sexVal: "女",
    message: ''
   }
},
methods: {
   childEvent: function (msg) {
     this.message = msg;  // msg 来自子组件
   }
}

点击 “按钮”值会传到 父组件中。 组件之间不能互相传值。

 vue组件之间数据传递的方法实例分析

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
filemanage功能中用到的lib.js
Apr 08 Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
jQuery Tools tooltip使用说明
Jul 14 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
小程序调用微信支付的方法
Sep 26 Javascript
vue添加class样式实例讲解
Feb 12 #Javascript
Vue中使用canvas方法总结
Feb 12 #Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 #Javascript
js实现json数组分组合并操作示例
Feb 12 #Javascript
vue文件运行的方法教学
Feb 12 #Javascript
vue的for循环使用方法
Feb 12 #Javascript
JavaScript常用工具方法封装
Feb 12 #Javascript
You might like
PHP批量生成缩略图的代码
2008/07/19 PHP
PHP判断远程url是否有效的几种方法小结
2011/10/08 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
JavaScript获取XML数据附示例截图
2014/03/05 Javascript
JavaScript运行时库属性一览表
2014/03/14 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
js实现简单计算器
2015/11/22 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
jQuery实现ajax的叠加和停止(终止ajax请求)
2016/08/08 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
vue 每次渲染完页面后div的滚动条保持在最底部的方法
2018/03/17 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python paramiko利用sftp上传目录到远程的实例
2019/01/03 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python list多级排序知识点总结
2019/10/23 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Python检测端口IP字符串是否合法
2020/06/05 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
理工大学毕业生自荐信范文
2014/02/22 职场文书
卫生标语大全
2014/06/21 职场文书
鼋头渚导游词
2015/02/05 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis