关于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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JS仿flash上传头像效果实现代码
Jul 18 Javascript
javascript倒计时功能实现代码
Jun 07 Javascript
Javascript对象属性方法汇总
Nov 21 Javascript
js选项卡的实现方法
Feb 09 Javascript
AngularJS基础 ng-options 指令详解
Aug 02 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 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防注入代码
2010/04/07 PHP
Views rows style模板重写代码
2011/05/16 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php之XML转数组函数的详解
2013/06/07 PHP
php GUID生成函数和类
2014/03/10 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
特殊情况下如何获取span里面的值
2014/05/20 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
javascript设计模式之中介者模式学习笔记
2017/02/15 Javascript
浅谈angular2的http请求返回结果的subcribe注意事项
2017/03/01 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
详解Vue开发微信H5微信分享签名失败问题解决方案
2018/08/09 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
详解webpack loader和plugin编写
2018/10/12 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
vue-cli3 取消eslint校验代码的解决办法
2020/01/16 Javascript
结合axios对项目中的api请求进行封装操作
2020/09/21 Javascript
vue实现下载文件流完整前后端代码
2020/11/17 Vue.js
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
python matplotlib库绘制散点图例题解析
2019/08/10 Python
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Django 路由层URLconf的实现
2019/12/30 Python
Pytorch 中的optimizer使用说明
2021/03/03 Python
css3简单练习实现遨游浏览器logo的绘制
2013/01/30 HTML / CSS
电子商务专业个人的自我评价分享
2013/10/29 职场文书
智能电子应届生求职信
2013/11/10 职场文书
大学生社会实践评语
2014/04/25 职场文书
运动会演讲稿
2014/05/07 职场文书
酒店工程部岗位职责
2015/02/12 职场文书
班级联欢会主持词
2015/07/03 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫