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 文件夹选择框的两种解决方案
Jul 01 Javascript
document.execCommand()的用法小结
Jan 08 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
详解JS中的attribute属性
Apr 25 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
Apr 23 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 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 curl获取301或302转向的网址问题的解决方法
2011/06/02 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
PHP检测移动设备类mobile detection使用实例
2014/04/14 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JavaScript获取各大浏览器信息图示
2015/11/20 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
用jquery获取自定义的标签属性的值简单实例
2016/09/17 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
python复制文件的方法实例详解
2015/05/22 Python
python修改字典内key对应值的方法
2015/07/11 Python
python删除特定文件的方法
2015/07/30 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
PIL对上传到Django的图片进行处理并保存的实例
2019/08/07 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
利用Python计算KS的实例详解
2020/03/03 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python如何写try语句
2020/07/14 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
python3 kubernetes api的使用示例
2021/01/12 Python
HTML5中5个简单实用的API
2014/04/28 HTML / CSS
十佳青年事迹材料
2014/08/21 职场文书
公司文体活动总结
2015/05/07 职场文书