Vue组件开发初探


Posted in Javascript onFebruary 14, 2017

注册一个组件

有两种方式可以注册一个组件,第一种是全局注册,第二种是局部注册

# 全局注册
Vue.component('my-component',{
  template: '<span>Hello</span>'
})

# 局部注册
var child = {
  template: '<span>Hello</span>'
}
new Vue({
  // ···
  components:{
    my-component: child
  }
})

注意:组件的注册必须要在Vue实例创建之前

使用组件

<div id="app">
  <my-component></my-component>
</div>

当我们需要使用到data时,data必须是一个函数,否则将会报错,这是Vue的一个规则,如下

Vue.component('my-component',{
  template: '<span>{{message}}</span>',
  data:function(){
    return {message:'hello'}
  }
})

组件间消息传递

当我们封装了组件A,但是组件A又嵌套了组件B,这时候组件AB形成了父子组件的关系,我们应该怎么来让父组件传递消息给子组件呢,这里用到了一个属性值props,如下

Vue.component('my-component',{
  props: ['message']
  template: '<span>{{message}}</span>'
})

# 通过props传递消息给子组件
<my-component message="Hello"></my-component>

上面的例子,我们通过props传递了参数给子组件,确实能改变子组件的值,但是,假如我们有这样一个要求,props的值是动态改变的,那么这种静态字面量传递参数的方式就不能满足我们的需求了。如下将说明如何进行动态的props值设定

<div id="app">
  <input v-model="parentMsg"><br>
  <my-component v-bind:message="parentMsg">
</div>

这里通过v-bind的命令,将我们的message与parentMsg进行绑定,这样,当我们的parentMsg改变时,message将能实时改变

自定义事件

父子组件之间如果通过props来传递数据的话,那么似乎只能进行单向的数据传递,只能从父组件向子组件传递,假如我们需要从子组件传递消息回去,那么就需要用到自定义事件了

# 使用v-on绑定自定义事件
Vue.component('my-component',{
  template: '<button v-on:click="increment">{{counter}}</button>',
  data: function(){
    return {counter: 0}
  },
  methods: {
    increment: function(){
      this.counter += 1;
      this.$emit(increment);
    }
  }
})
new Vue({
  el: '#app',
  data: {
    // ···
    total:0
  },
  methods: {
    // ···
    incrementTotal: function(){
      this.total += 1;

    }
  }
})
<div id="app">
  // ···
  <p>{{total}}</p>
  <my-component v-on:increment="incrementTotal"></my-component>
</div>

这里,我们点击按钮,按钮的显示的数值将会改变,同时,total的值也会动态的改变,这就是子组件回传数据的实例,我们点击按钮时,将会首先执行button的onclick方法,在onclick方法里面,通过this.$emit('increment')来执行我们自定义的事件,假如我们需要在$emit中添加参数,那么我们就要在$on()中进行回调的处理

我们接下来自定义一个表单输入控件,我们在输入框中输入信息,同时在P标签中显示出来。

这里我们平时使用的

v-model="message"

其实是下面语句的一个简化版本,也就是语法糖

v-bind:value="message" v-on:input="message = arguments[0]"

或者

v-bind:value="message" v-on:input="message = $event.target.value"

那么自定义表单控件我们需要干什么呢?

为了让v-model生效,我们需要在子组件中定义一个value的属性,还有一个监听新值产生的input事件
来看看我们的自定义控件

<my-input label="Message" :value="message" @input="message = arguments[0]"></my-input>

在上面,我们通过 :value="message" 绑定一个value使其与上一级组件的message相挂钩,后面这个 v-on:input 是子组件定义的事件,事件名可以自己定义,arguments[0] 是组件自定义时传入的第一个参数

完整代码如下:

# 使用自定义事件的表单输入控件
Vue.component('my-input',{
  template: '\
  <div>\
  <label>{{label}} :</label>\
  <input v-bind:value="value" v-on:input="onInput"></input>\
  </div>\
  '
  ,
  props:['value','label'],
  methods:{
    onInput:function(event){
      this.$emit('input',event.target.value);
      // this.$emit('input')
    }
  }

})
<div id="app">
  <p>{{message}}</p>
  <my-input label="Message" v-model="message"></my-input><br>
  <!-- <my-input label="Message" :value="message" @input="message = arguments[0]"></my-input> -->

</div>

我们在定义内部事件时,调用到了$emit(),为了让message能动态改变,我们需要将输入的参数回传回去,这样才能使外部组件与我们的表单控件显示一致

Vue组件的就先写到这,接下来还有事件分发,就接下来再写。由于理解的不同,可能有写得不好的,所以有错误的地方请指正。

Javascript 相关文章推荐
基于JavaScript 类的使用详解
May 07 Javascript
JS实现点击下载的小例子
Jul 10 Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
May 12 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
JS将unicode码转中文方法
May 08 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 #Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 #Javascript
Javascript下拉刷新的简单实现
Feb 14 #Javascript
Vue 短信验证码组件开发详解
Feb 14 #Javascript
JS去除字符串中空格的方法
Feb 14 #Javascript
You might like
php mysql索引问题
2008/06/07 PHP
网页游戏开发入门教程三(简单程序应用)
2009/11/02 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP对象实例化单例方法
2017/01/19 PHP
PHP Web表单生成器案例分析
2020/06/02 PHP
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
2007/07/11 Javascript
jQuery 版元素拖拽原型代码
2011/04/25 Javascript
基于json的jquery地区联动效果代码
2011/07/06 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
使用AOP改善javascript代码
2015/05/01 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
python使用folium库绘制地图点击框
2018/09/21 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
Django使用rest_framework写出API
2020/05/21 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
高分子材料与工程专业个人求职信
2013/12/15 职场文书
小学开学典礼主持词
2014/03/19 职场文书
村级换届选举方案
2014/05/10 职场文书
幼儿园运动会口号
2014/06/07 职场文书
大学生工作求职信
2014/06/23 职场文书
蔬果开业典礼发言稿应该怎么写?
2019/09/03 职场文书
Python中OpenCV实现简单车牌字符切割
2021/06/11 Python