（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. 洛谷——P1869 愚蠢的组合数

    P1869 愚蠢的组合数 题目描述 最近老师教了狗狗怎么算组合数,狗狗又想到了一个问题... 狗狗定义C(N,K)表示从N个元素中不重复地选取K个元素的方案数. 狗狗想知道的是C(N,K)的奇偶性. ...

  2. 【Spring学习】在Spring+Maven环境中使用Junit Test

    在Spring+Maven环境中使用Junit Test 前言 以前我是很讨厌写测试代码的,总觉得测试用例是测试人员写的,现在想想自己真是Too yuong too simple,接触开发多了之后发现 ...

  3. leetcode136 Single Number

    题意:数组中每个数字都出现了两次,只有一个出现一次,找出这个数 思路:很明显不能从头到位遍历来找,首先是超时的原因,再次就是这样很没意思·····但是却没想到什么好办法,因为不了解按位异或(XOR). ...

  4. [BZOJ1563][NOI2009]诗人小G(决策单调性优化DP)

    模板题. 每个决策点都有一个作用区间,后来的决策点可能会比先前的优.于是对于每个决策点二分到它会比谁在什么时候更优,得到新的决策点集合与区间. #include<cstdio> #incl ...

  5. DZY Loves Chinese / DZY Loves Chinese II

    题面在这里! 这两个其实是一个题啦..双倍经验加成23333 可以很简单的发现如果把一条树边和所有覆盖它的非树边都删去的话,那么图会不连通: 如果再手玩一下可以发现,如果把两个被非树边覆盖的集合相同的 ...

  6. 【贪心】【线性基】bzoj2460 [BeiJing2011]元素

    题意:让你求一些数在XOR下的带权极大无关组. 带权极大无关组可以用贪心,将这些数按权值从大到小排序之后,依次检验其与之前的数是否全都线性无关.可以用线性基来搞. 可以用拟阵严格证明,不过也可以脑补一 ...

  7. 【MySQL笔记】解除输入的安全模式，Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Queries and reconnect.

    Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE tha ...

  8. Word中设置三栏式表格

    一般期刊要求三栏式表格,我原来是选中表格,用橡皮差擦去不必要的线,但是今天发现只能查去横线,竖线一插曲格式就乱了,我想起了上图,不选“内部竖框线”就好了.

  9. Inno Setup入门（十九）——Inno Setup类参考（5）

    单选按钮 单选按钮在安装中也很常见,例如同一个程序可以选择安装不同的性质的功能,例如选择32位或者64位等,两者是排他性的,因此可以通过单选按钮(RadioButton)来实现,在同一个容器中放置的单 ...

  10. checkbox复选框居中

    选项框居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...