(1)全局注册

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component> </my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>组件内容</div>'
})
new Vue({
el: "#app"
})
</script>
</body> </html>

(2)局部注册

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component> </my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
var Child = {
template: '<div>组件内容</div>'
}
new Vue({
el: "#app",
components: {
'my-component': Child
}
})
</script>
</body> </html>

(3)is挂载组件

table、ul、ol、select这些标签会限制其内的元素,这时可以使用is来挂载组件

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<table>
<tbody is='my-component'>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>组件内容</div>'
})
new Vue({
el: "#app"
})
</script>
</body> </html>

(4)组件也可以有data,method,computed等属性。但是data是函数,数据需要return出去。

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<div>{{message}}</div>',
data: function() {
return {
message: '组件内容'
}
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>

(5)解决多个组件之间数据共享问题

给组件返回一个新的data对象

<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<title>Vue</title>
</head> <body>
<div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component> </div>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
<script type="text/javascript">
//示例前注册
Vue.component('my-component', {
//DOM结构必须被元素包含
template: '<button @click="counter++">{{counter}}</button>',
data: function() {
return {
counter: 0
}
}
})
new Vue({
el: "#app"
})
</script>
</body> </html>

(6)props传递数据、events触发事件和slot内容分发构成Vue组件的3个API来源

Vue 组件与复用的更多相关文章

  1. 打造 Vue.js 可复用组件

    Vue.js 是一套构建用户界面的渐进式框架.我们可以使用简单的 API 来实现响应式的数据绑定和组合的视图组件. 从维护视图到维护数据,Vue.js 让我们快速地开发应用.但随着业务代码日益庞大,组 ...

  2. Vue 组件复用性和slot

    1.组件可复用 2.slot元素作为组件模板之中的内容分发插槽,元素自身可以被替换 <!DOCTYPE html> <html lang="en"> < ...

  3. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

  4. vue组件最佳实践

    看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...

  5. 【Vue】详解Vue组件系统

    Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根节点这一初始化操作上: new Vue({ el: '#app' }) 注册组件并使用—— 全局注册 通过Vue.comp ...

  6. 关于vue组件的一个小结

    用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...

  7. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  8. vue2.0 如何自定义组件(vue组件的封装)

    一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...

  9. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

随机推荐

  1. UTF-8字符「EF BF BD」-备胎

    在众多的utf-8码点值中,除了ascii,你还应该记住「EF BF BD」,因为它是很多编程语言以及库中的备胎,即无效的码点值在编码的时候会默认用这个码点值进行替换,即utf-8中的超级「备胎」(R ...

  2. Linux基础系列-Day7

    NFS服务(基于CentOS 7.0) NFS(Network File System),网络文件系统,是linux与linux之间进行文件共享的服务,在NFS应用,本地NFS的客户端可以透明地读写位 ...

  3. SSH服务审计工具ssh-audit

    SSH服务审计工具ssh-audit   SSH服务是常见的远程访问服务.通过对SSH服务进行审计,可以尝试发现对应的漏洞.Kali Linux新增一款SSH服务审计工具ssh-audit.该工具支持 ...

  4. 【Splay】Codeforces Round #424 (Div. 1, rated, based on VK Cup Finals) B. Cards Sorting

    Splay要支持找最左侧的最小值所在的位置.类似线段树一样处理一下,如果左子树最小值等于全局最小值,就查左子树:否则如果当前节点等于全局最小值,就查当前节点:否则查右子树. 为了统计答案,当然还得维护 ...

  5. java程序中没有错,但是项目上面显示一个红叉的解决办法

    错误信息: 报Description  Resource Path Location Type Java compiler level does not match the version of th ...

  6. 如何在form初始化时自动隐藏FOLDER列

    方法1:直接设定PROMPT列和数据列ITEM的VISIBLE属性为No 方法2:在WHEN-NEW-FORM-INSTANCE触发器里: l_old_itm := :system.cursor_it ...

  7. 轻量级web服务器lighttpd的编译及配置(for x86-linux)

    转自:http://blog.163.com/ljf_gzhu/blog/static/131553440201211522317367/ 备注: PC Linux:Ubuntu-10.10 Linu ...

  8. UITabBarController 和 UINavigationController 的详解

    首先得搞清这两个控制器之间的层级关系,我们直接看官网给的图,如下所示: 从这张图可以看到:最右边的Assembled views是呈现给用户的界面,它左边的Window是最底层的窗口,重点来了,再往左 ...

  9. mac远程链接 windows

    https://bbs.feng.com/read-htm-tid-10516042.html 一.利用电脑系统自带的远程(喜欢懒人版的方法,或者小白用户,可以跳过这个方法看下一个) 1.打开mac, ...

  10. Linux音频驱动简述

    一.数字音频 音频信号是一种连续变化的模拟信号,但计算机仅仅能处理和记录二进制的数字信号.由自然音源得到的音频信号必须经过一定的变换,成为数字音频信号之后,才干送到计算机中作进一步的处理. 数字音频系 ...