（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. Spring Boot高级

    Spring Boot高级内容概要一.Spring Boot与缓存二.Spring Boot与消息三.Spring Boot与检索四.Spring Boot与任务五.Spring Boot与安全六.S ...

  2. 【拓展Lucas】模板

    求\(C_n^m \mod p\),写得太丑了qwq. 第一次写拓展Lucas竟然是在胡策的时候qwq写了两个半小时啊_(:з」∠)还写挂了一个地方qwq 当然今天胡策我也是第一次写中国剩余定理(ˇˍ ...

  3. [BZOJ5251][九省联考2018]劈配(网络流)

    5251: [2018多省省队联测]劈配 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 33  Solved: 22[Submit][Status][ ...

  4. [BZOJ 3326] 数数

    Link: BZOJ 3326 传送门 Solution: 明显是一道数位$dp$的题目,就是递推式复杂了点 先要求出一个数$\bar{n}$向添加一位后的$\bar{np}$的转化关系 令$res[ ...

  5. iOS framework静态库中使用xib和图片资源详解

    一.新建bundle 前2篇文章介绍了iOS 最新framework和.a静态库制作及使用全解   iOS 工程套子工程,主工程和framework工程或.a library静态库工程联调 我现在是在 ...

  6. 使用Busybox制作CRAMFS文件系统成功

    转:http://www.360doc.com/content/11/1013/22/7775902_155877501.shtml 这几天在使用Busybox制作FS2410开发板的CRAMFS文件 ...

  7. MySQL优化之如何了解SQL的执行频率

    http://www.jb51.net/article/50180.htm show [session|global] status 可以根据需要加上参数“ session ”或者“ global ” ...

  8. 利用tempo将json数据填充到html模板

    1.下载tempo 2.使用 <!DOCTYPE html> <html> <head lang="zn-ch"> <meta chars ...

  9. ALCHEMY 2 （FLASCC）新手入门 （WINDOWS 版）

    Adobe Alchemy(炼金术) 2的预发布版本已经对开发者开放,并且已经更名为 FlasCC.炼金术简单来说就是把c/c 代码编译成swf文件,它吸收了c/c 高效的执行效率,比传统开发的swf ...

  10. [转]SSIS ProtectionLevel 对包中敏感数据的访问控制

    本文转自:http://technet.microsoft.com/zh-cn/library/ms141747.aspx 为了保护 Integration Services 包中的数据,可以设置保护 ...