（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. Poj3468 A Simple Problem with Integers （分块）

    题面 Poj 题解 区间求和\(+\)区间修改板子,这里用分块写的 #include <cmath> #include <cstdio> #include <cstrin ...

  2. Sqli-labs less 9

    Less-9 本关我们从标题就可以看到 <基于时间-单引号>,所以很明显的这关要我们利用延时注入进行,同时id参数进行的是 ' 的处理.这里我们大致的将延时注入的方法演示一次. 这里用sl ...

  3. Sd - JavaBase问题

    1. Java有哪些基本数据类型 2. Java基本数据类型和引用类型的区别 3. Java的多态 4. Override和Overload的区别 5. Java内部类 6. 继承和组合的比较 7. ...

  4. BZOJ 1115 [POI2009]石子游戏Kam（阶梯博弈）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1115 [题目大意] 有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数. ...

  5. JVM 参数配置及详解 -Xms -Xmx -Xmn -Xss 调优总结

    堆大小设置 JVM 中最大堆大小有三方面限制: ①.相关操作系统的数据模型(32-bt还是64-bit)限制; ②.系统的可用虚拟内存限制; ③.系统的可用物理内存限制. 32位系统 下,一般限制在1 ...

  6. HDU 5631 Rikka with Graph 暴力 并查集

    Rikka with Graph 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5631 Description As we know, Rikka ...

  7. （Mark）Myeclipse10.6 下怎么安装Jad插件

    Jad是java的反编译工具,是命令行执行,反编译出来的源文件可读性较高.可惜用起来不太方便.还好找到eclipse下的插件,叫jadclipse,安装好之后,只要双击.class文件,就能直接看源文 ...

  8. opensue fstab故障恢复

    date: 20140505 author: Jin 故障背景: 早上启动本本 无法启动,报错信息(几个关键) WARNING:Failed to connect to lvmetad: No suc ...

  9. opengl笔记——OpenGL好资料备忘

    Plane Equation 注:面可理解为:连接面上的点与原点,投影相同(为:a*x1+b*x2+c*x3) OpenGL Matrix Class (C++) Overview OpenGL fi ...

  10. web安全开发指南--权限管理

    2.1               访问控制安全规则 1 访问控制必须只能在服务器端执行. 2 只通过session来判定用户的真实身份,避免使用其它数据域的参数(比如来自cookie.hidden域 ...