关于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 相关文章推荐
基于jQuery的ajax功能实现web service的json转化
Aug 29 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
js前端面试题及答案整理(一)
Aug 26 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
Mar 03 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 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使用SOAP调用.net的WebService数据
2013/11/12 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Javascript开发包大全整理
2006/12/22 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
浅谈Javascript嵌套函数及闭包
2010/11/09 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
javascript实现简单的Map示例介绍
2013/12/23 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
jquery实现一个简单的表单验证实例
2016/03/30 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
Bootstrap CSS布局之表单
2016/12/17 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
fetch 使用及如何接收JS传值
2017/11/11 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
Python中字典和JSON互转操作实例
2015/01/19 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
python实现图片处理和特征提取详解
2017/11/13 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python文件选择对话框的操作方法
2019/06/27 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
django项目中新增app的2种实现方法
2020/04/01 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
2014超市双十一活动策划方案
2014/09/29 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
社区服务活动感想
2015/08/11 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python