（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. Poj1151&HDU1542 Atlantis（扫描线+线段树）

    题意 给定\(n​\)个矩形\((x_1,y_1,x_2,y_2)​\),求这\(n​\)个矩形的面积并 题解 扫描线裸题,可以不用线段树维护,\(O(n^2)\)是允许的. #include < ...

  2. 洛谷——P2126 Mzc家中的男家丁

    P2126 Mzc家中的男家丁 题目背景 mzc与djn的…还没有众人皆知,所以我们要来宣传一下. 题目描述 mzc家很有钱(开玩笑),他家有n个男家丁,现在mzc要将她们全都聚集起来(干什么就不知道 ...

  3. 设计模式之State模式

    State模式定义: 允许一个对象在状态改变是,改变它的行为.看起来对象似乎修改了它的类. 模式理解(个人): State模式主要解决的事在开发中时常遇到的根据不同状态需要进行不同的处理操作的问题,而 ...

  4. HTML5 form内button

    突然发现奇怪的事 在html5 中bottn 的type不是submit但是单击的时候它自己就提交表单了. 然后在一查就看到 问题解决,加上type=“button”

  5. 【ZJOI2017】线段树

    题目描述 线段树是九条可怜很喜欢的一个数据结构,它拥有着简单的结构.优秀的复杂度与强大的 功能,因此可怜曾经花了很长时间研究线段树的一些性质. 最近可怜又开始研究起线段树来了,有所不同的是,她把目光放 ...

  6. POJ1704 Georgia and Bob 博弈论 尼姆博弈 阶梯博弈

    http://poj.org/problem?id=1704 我并不知道阶梯博弈是什么玩意儿,但是这道题的所有题解博客都写了这个标签,所以我也写了,百度了一下,大概是一种和这道题类似的能转换为尼姆博弈 ...

  7. hdu 1384 Intervals (差分约束）

    Intervals Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  8. 【最短路】【spfa】hdu6071 Lazy Running

    给你一个4个点的环,问你从2号点出发, 再回到2号点,长度>=K的最短路是多少.环上的边长度不超过30000. 跑出来所有dis(2,j)以后,然后for一遍j,根据dis(2,j)+t*2*w ...

  9. 【二分图匹配】BZOJ1562-[NOI2009] 变换序列

    [题目大意] 对于0,1,…,N-1的N个整数,给定一个距离序列D0,D1,…,DN-1,定义一个变换序列T0,T1,…,TN-1使得每个i,Ti的环上距离等于Di.一个合法的变换序列应是0,1,…, ...

  10. [转]Servlet的load-on-startup

      在servlet的配置当中,<load-on-startup>5</load-on-startup>的含义是: 标记容器是否在启动的时候就加载这个servlet. 当值为0 ...