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 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
JQuery 文本框使用小结
May 22 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
详解jQuery选择器
Dec 21 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
JS中的继承操作实例总结
Jun 06 Javascript
springboot+VUE实现登录注册
May 27 Vue.js
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与ASP
2006/10/09 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
浅析关于PHP位运算的简单权限设计
2013/06/30 PHP
Yii框架中 find findAll 查找出制定的字段的方法对比
2014/09/10 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php如何连接sql server
2015/10/16 PHP
非常有用的9个PHP代码片段
2016/04/06 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
让插入到 innerHTML 中的 script 跑起来的实现代码
2006/07/01 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
用React实现一个完整的TodoList的示例代码
2017/10/30 Javascript
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
JavaScript Canvas编写炫彩的网页时钟
2019/10/16 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
Python函数嵌套实例
2014/09/23 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python:print格式化输出到文件的实例
2018/05/14 Python
python实现人民币大写转换
2018/06/20 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
python getopt模块使用实例解析
2019/12/18 Python
浅谈Tensorflow 动态双向RNN的输出问题
2020/01/20 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
教学评估实施方案
2014/03/16 职场文书
大四学生找工作的自荐信
2014/03/27 职场文书
审美与表现自我评价
2015/03/09 职场文书
筑梦中国心得体会
2016/01/18 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
导游词之无锡梅园
2019/11/28 职场文书