vue单页开发父子组件传值思路详解


Posted in Javascript onMay 18, 2018

vue单页开发时经常需要父子组件之间传值,自己用过但是不是很熟练,这里我抽空整理了一下思路,写写自己的总结。

GitHub地址:https://github.com/leileibrother/wechat-vue

文件目录如下图,example.vue是父组件,exampleChild.vue是子组件。

vue单页开发父子组件传值思路详解

父组件引入子组件,父组件html的代码如下:

<template> 
 <div> 
  <h3>这是父组件</h3> 
  <p style="margin: 20px 0;text-align: center;"> 
   <span>子组件传过来的值是 “{{childValue}}”</span> 
  </p> 
  <example-child v-bind:message="parentMsg" @getChildValue="getValue"></example-child> 
 </div> 
</template> 
<script> 
 import exampleChild from './examplechild.vue'; 
 export default { 
  name: "example.vue", 
  components: { 
   exampleChild 
  }, 
  data(){ 
   return { 
    parentMsg:'hello', 
    childValue:'' 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   getValue:function (val) { 
    this.childValue = val; 
   } 
  } 
 } 
</script> 
<style scoped> 
</style>

子组件代码如下:

<template> 
 <div> 
  <p style="margin: 20px 0;text-align: center;">我是子组件,父组件穿传过来的值是{{message}}</p> 
  <p style="margin: 20px 0;text-align: center;"> 
   <button @click="send">点击向父组件传值</button> 
  </p> 
 </div> 
</template> 
<script> 
 export default { 
  name: "exampleChild.vue", 
  props:['message'], 
  data(){ 
   return { 
   } 
  }, 
  mounted(){ 
  }, 
  methods: { 
   send:function () { 
    this.$emit('getChildValue','你好父组件!') 
   } 
  } 
 } 
</script> 
<style scoped> 
</style>

1,父组件向子组件传值。

在父组件中使用v-bind来绑定数据传给子组件,如我写的v-bind:message="parentMsg",把message字段传给子组件,

vue单页开发父子组件传值思路详解

在子组件中使用props接收值,如props:['message'],接收父组件传过来的message字段,使用{{message}}就是可以使用父组件传过来的值了。

vue单页开发父子组件传值思路详解

2,子组件向父组件传值。

子向父传值需要一个“中转站”,如我写的getChildValue,命名随便写。

在子组件中使用$emit()来向父组件传值。第一个参数就是这个“中转站”,后面的参数是要传的值,可以是多个。

vue单页开发父子组件传值思路详解

在父组件中如下,也需要这个中转站来接收值

vue单页开发父子组件传值思路详解

getValue是接收子组件值的函数,参数val就是子组件传过来的值,这样就可以接收到子组件传过来的值了。

vue单页开发父子组件传值思路详解

总结

以上所述是小编给大家介绍的vue单页开发父子组件传值思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS判断不能为空实例代码
Nov 26 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
AngularJS入门教程(一):静态模板
Dec 06 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
关于vue.js v-bind 的一些理解和思考
Jun 06 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
Node.js Buffer用法解读
May 18 #Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 #Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 #Javascript
webpack4 css打包压缩问题的解决
May 18 #Javascript
微信小程序实现长按删除图片的示例
May 18 #Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 #Javascript
Vue数据双向绑定原理及简单实现方法
May 18 #Javascript
You might like
PHP中读写文件实现代码
2011/10/20 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
一个简单至极的PHP缓存类代码
2015/10/23 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
JavaScript实现统计文本框Textarea字数增强用户体验
2012/12/21 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
webpack中引用jquery的简单实现
2016/06/08 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Three.js中网格对象MESH的属性与方法详解
2017/09/27 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
2019/09/28 Javascript
node.js使用stream模块实现自定义流示例
2020/02/13 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
python实现朴素贝叶斯分类器
2018/03/28 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
python实现一个点绕另一个点旋转后的坐标
2019/12/04 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
网络事业创业计划书范文
2014/01/09 职场文书
生日主持词
2014/03/20 职场文书
老师对学生的评语
2014/04/18 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
总结Python常用的魔法方法
2021/05/25 Python
新手初学Java List 接口
2021/07/07 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python