（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音频驱动简述

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