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 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
获取当前按钮或者html的ID名称实例(推荐)
Jun 23 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
Sep 28 Javascript
浅谈Node.js之异步流控制
Oct 25 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
js的函数的按值传递参数(实例讲解)
Nov 16 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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
一个数据采集类
2007/02/14 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
javascript css float属性的特殊写法
2008/11/13 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
JS实现控制表格行内容垂直对齐的方法
2015/03/30 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
Js apply方法详解
2017/02/16 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
微信小程序实现星级评分和展示
2018/07/05 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
es6中let和const的使用方法详解
2020/02/24 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
js实现头像上传并且可预览提交
2020/12/25 Javascript
用实例分析Python中method的参数传递过程
2015/04/02 Python
在Django框架中编写Context处理器的方法
2015/07/20 Python
python魔法方法-属性访问控制详解
2016/07/25 Python
django 外键model的互相读取方法
2018/12/15 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
举例讲解Python常用模块
2019/03/08 Python
浅析python,PyCharm,Anaconda三者之间的关系
2019/11/27 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
类的核心特性有哪些
2014/01/01 面试题
盛大二次面试题
2016/11/18 面试题
《夹竹桃》教学反思
2014/04/20 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
环保倡议书500字
2014/05/15 职场文书
环保标语口号
2014/06/13 职场文书
2015大学生求职信范文
2015/03/20 职场文书
公司联欢会主持词
2015/07/04 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
火锅店的开业营销方案范本!
2019/07/05 职场文书