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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
解析javascript 实用函数的使用详解
May 10 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
JavaScript中各数制转换全面总结
Aug 21 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
简单了解three.js 着色器材质
Aug 03 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 判断变量类型实现代码
2009/10/23 PHP
PHP 自定义错误处理函数trigger_error()
2013/03/26 PHP
静态的动态续篇之来点XML
2006/08/15 Javascript
JS 自动安装exe程序
2008/11/30 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
nodejs命令行参数处理模块commander使用实例
2014/09/17 NodeJs
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
分享javascript、jquery实用代码段
2016/10/20 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python反转序列的方法实例分析
2018/03/21 Python
python采集微信公众号文章
2018/12/20 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python如何转换字符串大小写
2020/06/04 Python
Django如何使用asyncio协程和ThreadPoolExecutor多线程
2020/10/12 Python
Python 实现劳拉游戏的实例代码(四连环、重力四子棋)
2021/03/03 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
C语言开发工程师测试题
2016/12/20 面试题
家长会学生家长演讲稿
2013/12/29 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
本科应届生求职信
2014/08/05 职场文书
优秀班主任工作总结2015
2015/05/25 职场文书
外科护士长工作总结
2015/08/12 职场文书
python 破解加密zip文件的密码
2021/04/22 Python
nginx 配置指令之location使用详解
2022/05/25 Servers
详解CSS3浏览器兼容
2022/12/24 HTML / CSS