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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
Convert Seconds To Hours
Jun 16 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
JavaScript通过join函数连接数组里所有元素的方法
Mar 20 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 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实现的最大正向匹配算法示例
2017/12/19 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
ThinkPhP+Apache+PHPstorm整合框架流程图解
2020/11/23 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
IE与FireFox中的childNodes区别
2011/10/20 Javascript
只需一行代码,轻松实现一个在线编辑器
2013/11/12 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
2014/01/13 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
JS实现滑动插件
2020/01/15 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
Python使用Matlab命令过程解析
2020/06/04 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
自主招生学校推荐信
2014/09/26 职场文书
工作业绩不及格检讨书
2014/10/28 职场文书
美术教师个人总结
2015/02/06 职场文书
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python