vue.js组件之间传递数据的方法


Posted in Javascript onJuly 10, 2017

前言

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。如何传递数据也成了组件的重要知识点之一。

组件

组件与组件之间,还存在着不同的关系。父子关系与兄弟关系(不是父子的都暂称为兄弟吧)。

父子组件

父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件。

// 注册一个子组件
Vue.component('child', {
  data: function(){
    text: '我是father的子组件!'
  }
  template: '<span>{{ text }}</span>'
})
// 注册一个父组件
Vue.component('father', {
  template: '<div><child></child></div>' // 在模板中使用了child组件
})

直接使用 father 组件的时候:

<div id="app">
  <father></father>
</div>

页面中就会渲染出 :我是father的子组件!

father 组件在模板中使用了 child 组件,所以它就是父组件,child 组件被使用,所以 child 组件就是子组件。

兄弟组件

两个组件互不引用,则为兄弟组件。

Vue.component('brother1', {
  template: '<div>我是大哥</div>'
})
Vue.component('brother2', {
  template: '<div>我是小弟</div>'
})

使用组件的时候:

<div id="app">
  <brother1></brother1>
  <brother2></brother2>
</div>

页面中就会渲染出 :

我是大哥

我是小弟

Prop

子组件想要使用父组件的数据,我们需要通过子组件的 props 选项来获得父组件传过来的数据。以下我使用在 .vue 文件中的格式来写例子。

如何传递数据

在父组件 father.vue 中引用子组件 child.vue,把 name 的值传给 child 组件。

<template>
  <div class="app">
    // message 定义在子组件的 props 中
    <child :message="name"></child>
  </div>
</template>
<script>
  import child from './child.vue';
  export default {
    components: {
      child
    },
    data() {
      return {
        name: 'linxin'
      }
    }
  }
</script>

在子组件 child.vue 中的 props 选项中声明它期待获得的数据

<template>
  <span>Hello {{message}}</span>
</template>
<script>
  export default {
    // 在 props 中声明获取父组件的数据通过 message 传过来
    props: ['message']
  }
</script>

那么页面中就会渲染出:Hello linxin

单向数据流

当父组件的 name 发生改变,子组件也会自动地更新视图。但是在子组件中,我们不要去修改 prop。如果你必须要修改到这些数据,你可以使用以下方法:

方法一:把 prop 赋值给一个局部变量,然后需要修改的话就修改这个局部变量,而不影响 prop

export default {
  data(){
    newMessage: null 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法二:在计算属性中对 prop 进行处理

export default {
  props: ['message'],
  computed{
    newMessage(){
      return this.newMessage + ' 哈哈哈';
    }
  }
}

自定义事件

prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。修改子组件的 prop 值,是不会传回给父组件去更新视图的。那么子组件要如何去与父组件通讯呢?

那就是自定义事件。通过在父组件 $on(eventName) 监听自定义事件,当子组件里 $emit(eventName) 触发该自定义事件的时候,父组件执行相应的操作。

比如在父组件中控制一个弹框子组件的显示,在子组件中按下关闭之后,告诉父组件去隐藏它,然后父组件就执行操作隐藏弹框。

<template>
  <div class="app">
    // hide 为自定义事件,名字可以自己随便起,不能有大写字母,可以使用短横线
    // @hide 监听子组件触发 hide 事件,则会执行 hideDialog 方法
    <dialog :is-show="show" @hide="hideDialog"></dialog>
    <button @click="showDialog">显示弹框</button>
  </div>
</template>
<script>
  import dialog from './dialog.vue';
  export default {
    components: { dialog },
    data() {
      return {
        show: false
      }
    },
    methods: {
      showDialog() {
        this.show = true;
      },
      hideDialog() {
        this.show = false;
      }
    }
  }
</script>

在子组件 dialog.vue 中:

<template>
  <div class="dialog" v-show="isShow">
    <p>这里是弹框子组件</p>
    <button @click="toHide">关闭弹框</button>
  </div>
</template>
<script>
  export default {
    // 驼峰式命名的 prop 需要转换为相对应的短横线隔开式 is-show
    props: ['isShow'],
    methods: {
      toHide(){
        // $emit 方法触发父组件的监听事件
        this.$emit('hide');
      }
    }
  }
</script>

这样就实现了父子组件之间的相互通讯。

Vuex

上面的例子都是建立在父子关系的组件上,但是对于其他层级的关系,实现起来就比较繁琐了。那么这时候 Vuex 就能更好的帮你在各个组件间实时通讯了。关于 Vuex,可查看我的另一篇文章:Vuex 模块化实现待办事项的状态管理

总结

组件通讯并不是一定要使用必须要使用 Vuex,对于一些简单的数据传递,prop 也可以完成。本文主要是对组件传参的一些基础知识点的记录,实战可以参考 notepad 这个例子,使用 prop 实现子组件的显示与隐藏,使用 vuex 来实现组件间的数据状态管理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
JavaScript 快捷键设置实现代码
Mar 13 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
AngularJS中的DOM操作用法分析
Nov 04 Javascript
EditPlus中的正则表达式 实战(2)
Dec 15 Javascript
Vue框架中正确引入JS库的方法介绍
Jul 30 Javascript
JavaScript实现数值自动增加动画
Dec 28 Javascript
深入理解js 中async 函数的含义和用法
May 13 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 #Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 #jQuery
Angular X中使用ngrx的方法详解(附源码)
Jul 10 #Javascript
angular实现spa单页面应用实例
Jul 10 #Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 #Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 #Javascript
vue.js实现备忘录功能的方法
Jul 10 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
2009/02/14 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
2014/05/29 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
微信小程序http连接访问解决方案的示例
2018/11/05 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
解决layui数据表格table的横向滚动条显示问题
2019/09/04 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
[57:47]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
python-opencv在有噪音的情况下提取图像的轮廓实例
2017/08/30 Python
python生成excel的实例代码
2017/11/08 Python
hmac模块生成加入了密钥的消息摘要详解
2018/01/11 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
Falsk 与 Django 过滤器的使用与区别详解
2019/06/04 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
tensorflow多维张量计算实例
2020/02/11 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python数据可视化实现漏斗图过程图解
2020/07/20 Python
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
String和StringBuffer的区别
2015/08/13 面试题
银行实习自我鉴定
2013/10/12 职场文书
企业消防安全责任书
2014/07/23 职场文书
实习证明模板
2015/06/16 职场文书