关于vue.js组件数据流的问题


Posted in Javascript onJuly 26, 2017

一、组件

组件,可以说是现代前端框架中必不可少的组成部分。使用组件,不仅能极大地提高代码的复用率和开发者的开发效率,对于代码后期的维护也有着非常重要的意义。前端开发,由于历史遗留原因,WebComponent 虽然好用,但其发展情况却受到极大地限制,和很多新兴的前端技术一样,可望而不可即。基于这样的情况,聪明的开发者们尝试通过框架内部集成相应的功能来完成组件化,各种现代前端框架基本上都有各自的实现。这里我们来分析一下 vue 的组件,重点关注数据的流向。

二、vue 组件

vue 的组件,创建模板的时候是基于普通的 html 的,不需要学习 jsx、handlebars 等的特殊语法,所以相对来说,学习成本比较低,更容易上手。使用 vue 组件的时候,一般分为组件注册和组件调用两个部分。

(一)组件注册

Vue.component('pop-box', {
  template:  '<div class="component-box">\
    <div class="component-content">\
    ..........
    </div>\
  </div>',

  props: [...],

  data: function () {
    return ...;
  },

  methods: {
    ...
  },

  mounted () {
    ...
  },

  ...
});

利用 Vue.component 方法我们可以很轻松的创建一个全局可用的组件,当然也可以在实例或组件内部注册局部组件,但原理大同小异。Vue.component 的第一个参数是组件的名字,或者说唯一标识符(id),后续调用它将通过这个名字进行调用;第二个参数是一个对象,通常它包含了模板(template)、组件内维护的数据(data、computed)、方法(methods)、钩子函数(created 、 mounted...)等关键信息。

值得注意的是:

  1. 组件内的 data 必须是一个函数,它的返回值将作为实际的 “data”;
  2. vue1.x 和 vue2.x 的钩子函数略有不同,如果发现钩子函数不生效,记得确认 vue 的版本。

(二)组件调用

(1)开始标签 + 结束标签模式

<pop-box text="200" v-bind:number="200"></pop-box>

(2)无结束标签模式

<pop-box text="200" v-bind:number="200" />

调用 vue 组件有以上两种模式。两种模式上,如果没有使用 slot 那么实际上并没有任何区别,但如果需要使用 slot 的时候,便只能使用同时包含开始标签和结束标签的模式。

值得注意的是,上面绑定数据的时候,直接采用 property="value" 的形式,不管 value 是数字还是字符串,property 最终都是字符串类型。如果想让其变成数字类型,请使用 v-bind:property="value" 的形式,或者简写为 :property="value" 。

三、vue 组件数据流

vue 遵循了典型的单向数据流的原则,即数据总是由父组件传递到子组件,子组件在其内部可以有自己维护的数据,但它无权修改父组件传递给它的数据,当开发者尝试这样做的时候,vue 将会报错。这样做的好处是,防止多个子组件都尝试修改父组件状态时,让这一行为变得难以追溯。vue 中具体实现方式如下:

关于vue.js组件数据流的问题

父组件通过绑定 props 的方式,将数据传递给子组件,但是子组件自己并没有权利修改这些数据,如果要修改,只能把修改这一个行为通过 event 的方式报告给父组件,由父组件本身决定改如何处理数据。

(一)简单实例

<div id="app">
  <my-counter @inc="increase" :counter="counter"></my-counter>
</div>
...
Vue.component('my-counter', {
  template:  '<div class="counter">\
    <div>{{counter}}</div>\
    <button @click="inc">increase</button>\
  </div>',

  props: ['counter'],

  methods: {
    inc: function () {
      this.$emit('inc');
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  methods: {
    increase () {
      this.counter ++;
    }
  }
});

为了显得更简单这里只创建了一个 my-counter 组件作为子组件,我们可以姑且将 vue 的实例认为是一个父组件。

(二)分析数据流向分析

(1)我们在父组件中定义了一个数据叫 counter;
(2)调用组件的时候,通过 :counter="counter" 的方式,将父组件的 counter 以 prop 的方式传递到子组件中;
(3)子组件读取到 counter,并将其展示在模板中;
(4)用户点击按钮,counter 需要增加;
(5)子组件监听到这个事件,但它并不直接修改 counter,而是通过 this.$emit('inc'); 以自定义事件的形式,将需要增加的这一个事件报告给父组件;
(6)父组件中,由于通过执行过 @inc="increase" ,能够监听到子组件报告过来的事件,并在自己的 increase 方法中,实现 counter 的增加;
(7)父组件里的数据更新了,子组件里的数据也将自动更新,同时也将更新界面内容,这一过程由框架自动完成。

(三)总结

上面这一个示例,基本完整展示了 vue 主要的数据流向,但是这种基于 prop/evnet 的方式仅适用于存在直接的父子关系的组件,兄弟组件或者大量组件的数据流向如果再基于这种方式将会变得非常麻烦,这时可以考虑使用更加强大的状态管理模式。

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

Javascript 相关文章推荐
将两个div左右并列显示并实现点击标题切换内容
Oct 22 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
Bootstrap table使用方法总结
May 10 Javascript
使用vue构建一个上传图片表单
Jul 04 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
基于layui table返回的值的多级嵌套的解决方法
Sep 19 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
JS实现购物车基本功能
Nov 08 Javascript
使用JS前端技术实现静态图片局部流动效果
Aug 05 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 #Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 #Javascript
node实现简单的反向代理服务器
Jul 26 #Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 #Javascript
Vue中计算属性computed的示例解读
Jul 26 #Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 #Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 #Javascript
You might like
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
PHP 设计模式之观察者模式介绍
2012/02/22 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
php英文单词统计器
2016/06/23 PHP
php基于PDO连接MSSQL示例DEMO
2016/07/13 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
Yii2基于Ajax自动获取表单数据的方法
2016/08/10 PHP
js正确获取元素样式详解
2009/08/07 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
JavaScript闭包函数访问外部变量的方法
2014/08/27 Javascript
一个js过滤空格的小函数
2014/10/10 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
TypeScript学习之强制类型的转换
2016/12/27 Javascript
jquery.tableSort.js表格排序插件使用方法详解
2020/08/12 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
js实现缓动动画
2020/11/25 Javascript
[07:01]DOTA2-DPC中国联赛正赛 Aster vs Magma 3月5日 赛后选手采访
2021/03/11 DOTA
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
Python类的用法实例浅析
2015/05/27 Python
Python 文件管理实例详解
2015/11/10 Python
python3处理含有中文的url方法
2018/05/10 Python
python读写配置文件操作示例
2019/07/03 Python
使用Pycharm分段执行代码
2020/04/15 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
简单而又朴实的个人求职信分享
2013/12/12 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
任命书标准格式
2015/03/02 职场文书
秋菊打官司观后感
2015/06/03 职场文书
法制工作总结2015
2015/07/23 职场文书
pytest配置文件pytest.ini的详细使用
2021/04/17 Python