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 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
JS 实现导航栏悬停效果(续2)
Sep 24 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue生成文件本地打开查看效果的实例
Sep 06 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
Oct 26 Javascript
微信小程序网络请求实现过程解析
Nov 06 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和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
PHP echo()函数讲解
2019/02/15 PHP
Laravel 实现关系模型取出需要的字段
2019/10/10 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
js 数据类型转换总结笔记
2011/01/17 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
JavaScript利用键盘码控制div移动
2020/03/19 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
python操作redis的方法
2015/07/07 Python
详解python 发送邮件实例代码
2016/12/22 Python
基于Python闭包及其作用域详解
2017/08/28 Python
Python设计模式之策略模式实例详解
2019/01/21 Python
python 读取数据库并绘图的实例
2019/12/03 Python
tensorflow-gpu安装的常见问题及解决方案
2020/01/20 Python
python3实现将json对象存入Redis以及数据的导入导出
2020/07/16 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
员工培训邀请函
2014/01/11 职场文书
暑期研修感言
2014/02/17 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
融资合作协议书范本
2014/10/17 职场文书
欠款证明
2015/06/24 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
Java Spring读取和存储详细操作
2022/08/05 Java/Android