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 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
csdn 博客的css样式 v3
Feb 24 Javascript
JQuery与iframe交互实现代码
Dec 24 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
javascript常用函数(1)
Nov 04 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
Jan 22 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 Javascript
详解vue-cli中使用rem,vue自适应
May 06 Javascript
vue中的过滤器实例代码详解
Jun 06 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生成静态文件的多种方法分享
2012/07/17 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP实现简单日历类编写
2020/08/28 PHP
laravel与thinkphp之间的区别与优缺点
2021/03/02 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
javascript复制对象使用说明
2011/06/28 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
关于Jquery操作Cookie取值错误的解决方法
2013/08/26 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JavaScript ES6中的简写语法总结与使用技巧
2018/12/30 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
详解Python中break语句的用法
2015/05/14 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
django model通过字典更新数据实例
2020/04/01 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
澳大利亚制造的蜡烛和扩散器:Glasshouse Fragrances
2018/05/20 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
如何反序的迭代一个序列?how do I iterate over a sequence in reverse order
2012/02/04 面试题
运动会广播稿30字
2014/01/21 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
户外用品商店创业计划书
2014/01/29 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
材料物理专业求职信
2014/09/01 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
python3使用diagrams绘制架构图的步骤
2021/04/08 Python
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript