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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jQuery判断数组是否包含了指定的元素
Mar 10 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
JS图片压缩(pc端和移动端都适用)
Jan 12 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】
Dec 19 Javascript
JS集合set类的实现与使用方法示例
Feb 01 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
详解elementUI中input框无法输入的问题
Apr 27 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 删除数组元素
2009/01/16 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
PHP多进程编程总结(推荐)
2016/07/18 PHP
由document.body和document.documentElement想到的
2009/04/13 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
JavaScript获取onclick、onchange等事件值的代码
2013/07/22 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
Angular5给组件本身的标签添加样式class的方法
2018/04/07 Javascript
在Webpack中用url-loader处理图片和字体的问题
2020/04/28 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
尝试使用Python多线程抓取代理服务器IP地址的示例
2015/11/09 Python
python操作redis方法总结
2018/06/06 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
[原创]Python入门教程2. 字符串基本操作【运算、格式化输出、常用函数】
2018/10/29 Python
python抖音表白程序源代码
2019/04/07 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python实现集中式的病毒扫描功能详解
2019/07/09 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
添柏岚英国官方网站:Timberland英国
2019/11/28 全球购物
房地产广告词大全
2014/03/19 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers