vue component组件使用方法详解


Posted in Javascript onJuly 14, 2017

什么是组件

按照惯例,引用Vue官网的一句话:

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。 

组件component的注册

全局组件:

Vue.component('todo-item',{
  props:['grocery'],
  template:'<li>{{grocery.text}}</li>'
})
var app7 = new Vue({
  el:"#app7",
  data:{
    groceryList:[
      {"id":0,"text":"蔬菜"},
      {"id":1,"text":"奶酪"},
      {"id":2,"text":"其他"}
    ]
  }
})
<div id="app7">
  <ol>
    <todo-item
      v-for="grocery in groceryList"
      v-bind:grocery="grocery"
      v-bind:key="grocery.id">
    </todo-item>
  </ol>
</div>

局部注册:

var Child = {
 template: '<div>A custom component!</div>'
}
new Vue({
 // ...
 components: {
  // <my-component> 将只在父模板可用
  'my-component': Child
 }
})

DOM模板解析说明

组件在某些HTML标签下会受到一些限制。
比如一下代码,在table标签下,组件是无效的。

<table>
 <my-row>...</my-row>
</table>

解决方法是,通过is属性使用组件

<table>
 <tr is="my-row"></tr>
</table>

应当注意,如果您使用来自以下来源之一的字符串模板,将不会受限

<script type="text/x-template">

JavaScript 内联模版字符串

.vue 组件

data使用函数,避免多组件互相影响

html

<div id="example-2">
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
 <simple-counter></simple-counter>
</div>

js

var data = { counter: 0 }
Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return data
 }
})
new Vue({
 el: '#example-2'
})

如上,div下有三个组件,每个组件共享一个counter。当任意一个组件被点击,所有组件的counter都会加一。

解决办法如下

js

Vue.component('simple-counter', {
 template: '<button v-on:click="counter += 1">{{ counter }}</button>',
 data: function () {
  return {counter:0}
 }
})
new Vue({
 el: '#example-2'
})

这样每个组件生成后,都会有自己独享的counter。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下操作HTML控件的实现代码
Jan 12 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
jquery实现的动态回到顶部特效代码
Oct 28 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
js验证框架实现代码分享
May 18 Javascript
js实现图片缓慢放大缩小效果
Aug 02 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 #Javascript
Vue filters过滤器的使用方法
Jul 14 #Javascript
vue.js如何更改默认端口号8080为指定端口的方法
Jul 14 #Javascript
Vue computed计算属性的使用方法
Jul 14 #Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 #Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 #Javascript
Javascript中Promise的四种常用方法总结
Jul 14 #Javascript
You might like
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
Yii2 hasOne(), hasMany() 实现三表关联的方法(两种)
2017/02/15 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
js返回上一页并刷新代码整理
2012/12/21 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
JavaScript严格模式下关于this的几种指向详解
2017/07/12 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序实现页面监听自定义组件的触发事件
2020/11/01 Javascript
python 性能提升的几种方法
2016/07/15 Python
Python新手如何进行闭包时绑定变量操作
2020/05/29 Python
运行Python编写的程序方法实例
2020/10/21 Python
硕士研究生自我鉴定
2013/11/08 职场文书
电脑教师的教学自我评价
2013/11/26 职场文书
《我的伯父鲁迅先生》教学反思
2014/02/12 职场文书
企业活动策划方案
2014/06/02 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014年度思想工作总结
2014/11/27 职场文书
大学生逃课检讨书
2015/05/04 职场文书
寻找最美乡村教师观后感
2015/06/18 职场文书
《狼牙山五壮士》读后感:宁死不屈,视死如归
2019/08/16 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python