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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
js切换光标示例代码
Oct 10 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
javascript事件冒泡简单示例
Jun 20 Javascript
AngularJS中isolate scope的用法分析
Nov 22 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP中soap的用法实例
2014/10/24 PHP
详解在PHP的Yii框架中使用行为Behaviors的方法
2016/03/18 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
PHP实现统计所有字符在字符串中出现次数的方法
2017/10/17 PHP
PHP实现微信商户支付企业付款到零钱功能
2018/09/30 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
jquery 事件对象属性小结
2010/04/27 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
js性能优化技巧
2015/11/29 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
用Python写冒泡排序代码
2016/04/12 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
Django中url的反向查询的方法
2018/03/14 Python
python奇偶行分开存储实现代码
2018/03/19 Python
Django 路由控制的实现代码
2018/11/08 Python
Python函数和模块的使用总结
2019/05/20 Python
在SQLite-Python中实现返回、查询中文字段的方法
2019/07/17 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
MIXIT官网:俄罗斯最大的化妆品公司之一
2020/01/25 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
电脑售后服务承诺书
2014/03/27 职场文书
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers