关于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 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
JavaScript触发onScroll事件的函数节流详解
Dec 14 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
解决node-sass偶尔安装失败的方法小结
Dec 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
150kHz到30Mhz完全冲浪手册
2020/03/20 无线电
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
js函数使用技巧之 setTimeout(function(){},0)
2009/02/09 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
js中小数转换整数的方法
2014/01/26 Javascript
Jquery实现的角色左右选择特效
2014/05/21 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
Python实现两个list对应元素相减操作示例
2017/06/09 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
Snapfish爱尔兰:在线照片打印和个性化照片礼品
2018/09/17 全球购物
领导的自我鉴定
2013/12/28 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
学校评语大全
2014/05/06 职场文书
珍惜资源的建议书
2014/08/26 职场文书
2015年基层党建工作总结
2015/05/14 职场文书
职工培训工作总结
2015/08/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
JavaScript+HTML实现学生信息管理系统
2021/04/20 Javascript