Vue父子组件之间的通信实例详解


Posted in Javascript onSeptember 28, 2018

 在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。

一、父组件到子组件通讯

父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function)。vue提倡单项数据流,因此在通常情况下都是父组件传递数据给子组件使用,子组件触发父组件的事件,并传递给父组件所需要的参数。

1、通过props传递数据

父子通讯中最常见的数据传递方式就是通过props传递数据,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接受到父组件传递的数据进行验证使用。

<!--父组件-->
 <template>
  <div>
   <h2>父组件</h2>
   <br>
   <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
 
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是来自父组件的消息',
    };
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子组件-->
 <template>
  <div>
   <h3>我是子组件一</h3>
   <span>{{parentMessage}}</span>
  </div>
 </template>
 <script>
  export default{
   props: ['parentMessage'],
  };
 </script>
 <style scoped>
 </style>

props可以接受function,所以function也可以以这种方式传递到子组件使用。

2、通过$on传递父组件方法

通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系。

<!--父组件-->
 <template>
  <div>
   <h2>父组件</h2>
   <br>
   <Child-one @childEvent="parentMethod"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
 
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是来自父组件的消息',
    };
   },
   methods: {
    parentMethod() {
     alert(this.parentMessage);
    },
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子组件-->
 <template>
  <div>
   <h3>我是子组件一</h3>
  </div>
 </template>
 <script>
  export default{
   mounted() {
    this.$emit('childEvent');
   },
  };
 </script>
 <style scoped>
 </style>

3、获取父组件然后使用父组件中的数据(不推荐)

准确来说这种方式并不属于数据的传递而是一种主动的查找。父组件并没有主动的传递数据给子组件,而是子组件通过与父组件的关联关系,获取了父组件的数据。

 该方法虽然能实现获取父组件中的数据但是不推荐这种方式,因为vue提倡单向数据流,只有父组件交给子组件的数据子组件才有使用的权限,不允许子组件私自获取父组件的数据进行使用。在父与子的关系中子应当是处于一种被动关系。

 this.$parent

此处的this为子组件实例

二、子组件到父组件通讯

子组件到父组件的通讯主要为父组件如何接受子组件之中的数据。这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function)。

1、通过$emit传递父组件数据

与父组件到子组件通讯中的$on配套使用,可以向父组件中触发的方法传递参数供父组件使用。

<!--父组件-->
 <template>
  <div>
   <h2>父组件</h2>
  <br>
   <Child-one @childEvent="parentMethod"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
  export default{
   components: {
    ChildOne,
   },
   data() {
    return {
     parentMessage: '我是来自父组件的消息',
    };
   },
   methods: {
    parentMethod({ name, age }) {
     console.log(this.parentMessage, name, age);
    },
   },
  };
 </script>
 <style scoped>
 </style>

 <!--子组件-->
 <template>
  <div>
   <h3>我是子组件一</h3>
  </div>
 </template>
 <script>
  export default{
   mounted() {
    this.$emit('childEvent', { name: 'zhangsan', age: 10 });
   },
  };
 </script>
 <style scoped>
 </style>

2、refs获取

可以通过在子组件添加ref属性,然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和this.$parent一样并不属于数据的传递而是一种主动的查找。

 尽量避免使用这种方式。因为在父子组件通信的过程中。父组件是处于高位是拥有控制权,而子组件在多数情况下应该为纯视图组件,只负责视图的展示和自身视图的逻辑操作。对外交互的权利应该由父组件来控制。所以应当由父组件传递视图数据给子组件,子组件负责展示。而子组件的对外交互通过$emit触发父组件中相应的方法,再由父组件处理相应逻辑。

<template>
  <div>
   <h2>父组件</h2>
   <br>
   <Child-one ref="child"></Child-one>
  </div>
 </template>
 <script>
  import ChildOne from './ChildOne';
  export default{
   components: {
    ChildOne,
   },
   mounted(){
    console.log(this.$refs['child']);
   },
  };
 </script>
 <style scoped>
 </style>
this.$refs['child']

总结

以上所述是小编给大家介绍的Vue父子组件之间的通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
JavaScript判断浏览器及其版本信息
Jan 20 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue引入axios同源跨域问题
Sep 27 #Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 #Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 #Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
Sep 27 #Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
Sep 27 #Javascript
vue-cli的工程模板与构建工具详解
Sep 27 #Javascript
Vue项目查看当前使用的elementUI版本的方法
Sep 27 #Javascript
You might like
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
php 无限极分类
2008/03/27 PHP
Zend Framework教程之Zend_Db_Table_Row用法实例分析
2016/03/21 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
JS event使用方法详解
2008/04/28 Javascript
Javascript 面向对象(一)(共有方法,私有方法,特权方法)
2012/05/23 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
python 使用paramiko模块进行封装,远程操作linux主机的示例代码
2020/12/03 Python
美国羊皮公司:Overland
2018/01/15 全球购物
工商学院毕业生自荐信
2013/11/12 职场文书
资源环境与城市管理专业推荐信
2013/11/30 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
党员党性分析材料
2014/02/17 职场文书
《学会待客》教学反思
2014/02/22 职场文书
环保建议书作文
2014/03/12 职场文书
关于祖国的演讲稿
2014/05/04 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
消防宣传标语大全
2015/08/03 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
Windows server 2022创建创建林、域树、子域的步骤
2022/06/25 Servers