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 相关文章推荐
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
js替换字符串的所有示例代码
Jul 23 Javascript
获取数组中最大最小值方法js代码(自写)
Aug 12 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
Vue.js手风琴菜单组件开发实例
May 16 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
Aug 24 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之第十天
2006/10/09 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
对laravel in 查询的使用方法详解
2019/10/09 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
javascript下使用Promise封装FileReader
2016/02/19 Javascript
深入理解js中this的用法
2016/05/28 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
2017/01/13 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
Angular4集成ng2-file-upload的上传组件
2018/03/14 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
Python 正则表达式(转义问题)
2014/12/15 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python新手学习可变和不可变对象
2020/06/11 Python
python collections模块的使用
2020/10/16 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
eBay爱尔兰站:eBay.ie
2019/08/09 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
中班下学期幼儿评语
2014/12/30 职场文书
地方课程教学计划
2015/01/19 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
欢送领导祝酒词
2015/08/12 职场文书