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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
vue.js组件之间传递数据的方法
Jul 10 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 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中的session安全吗?
2016/01/22 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
关于jQuery中.attr()和.prop()的问题探讨
2013/09/06 Javascript
js切换光标示例代码
2013/10/10 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
JS实现的四级密码强度检测功能示例
2017/05/11 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
vue fetch中的.then()的正确使用方法
2020/04/17 Javascript
原生js实现五子棋游戏
2020/05/28 Javascript
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
基于python socketserver框架全面解析
2017/09/21 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
Python中的默认参数实例分析
2018/01/29 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python join方法使用详解
2019/07/30 Python
django自定义模板标签过程解析
2019/12/14 Python
Python多线程正确用法实例解析
2020/05/30 Python
python中doctest库实例用法
2020/12/31 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
Public Desire美国/加拿大:全球性的在线鞋类品牌
2018/12/17 全球购物
工作交流会欢迎词
2014/01/12 职场文书
医院辞职信范文
2014/01/17 职场文书
12岁生日感言
2014/01/21 职场文书
人事部岗位职责范本
2014/03/05 职场文书
医学生职业生涯规划书范文
2014/03/13 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
2015年食品安全工作总结
2015/05/15 职场文书