全局组件

所有实例都能用全局组件。

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <runoob></runoob>

</div>

<script>

// 注册

Vue.component('runoob', {

  template: '<h1>自定义组件!</h1>'

})

// 创建根实例

new Vue({

  el: '#app'

})

</script>

</body>

</html>

效果展示自定义组件的HTML内容。

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

HTML

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <runoob></runoob>

</div>

<script>

var Child = {

  template: '<h1>自定义组件!</h1>'

}

// 创建根实例

new Vue({

  el: '#app',

  components: {

    // <runoob> 将只在父模板可用

    'runoob': Child

  }

})

</script>

</body>

</html>

效果同上也是输出HTML内容。

VueJS组件之全局组件与局部组件的更多相关文章

  1. vue组件调用(全局调用和局部调用)

    当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...

  2. Vue学习-组件的基本使用（局部组件）

    目录 示例代码 1.创建组件(构造器对象创建-Vue.extend) 2.注册组件 3.使用组件 4.语法糖创建并注册组件 示例代码 http://jsrun.net/H8vKp/edit 1.创建组 ...

  3. Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  4. Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值

    一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...

  5. vue（3）—— vue的全局组件、局部组件

    组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...

  6. vue 组件 全局注册和局部注册

    全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...

  7. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  8. Vue其他指令-组件-全局-局部-组件的交互父传子

    v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  9. vue中的全局组件和局部组件的应用

    1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...

随机推荐

  1. PE第n弹

    PE201 -- F[i][j][k] 和为i前j个选了k个方案数.因为值域很小. PE202 -- 那个反射其实挺酷炫的,你考虑把它的镜面反射去掉,把它扩展成一个无限大的正三角网格.. PE410 ...

  2. Visual Studio调试技巧 -- Attach to Process

    本文系作者原创,但可随意转载.另:图中使用的IDE为Visual Studio 2013 RC 英文版. 一般写完代码时,我们通常会启动调试运行一下看看是否正确,启动运行的方式无非是F5-- Star ...

  3. 负载平衡（cogs 741）

    «问题描述:G 公司有n 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使n 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运.«编程任务:对于给定的n 个环 ...

  4. Codevs 1060 搞笑世界杯

    1060 搞笑世界杯 时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond 题目描述 Description 随着世界杯小组赛的结束,法国,阿根廷等世界强队都纷纷被淘汰, ...

  5. [TYVJ1930]编年史

    现在 applepi 手上有一本十分古老的编年史,这本史书记录了很多著名的历史事件.于是applepi 有了一个奇怪的想法……他想知道那些有名的历史事件都是在星期几发生的.现在轮到你了,你要帮助app ...

  6. User Experience Collection

    about a data driven system front end: 1. about succeeded requests: they do not want to see alerts ab ...

  7. bzoj 1228 [SDOI2009]E&D SG函数打表 找规律

    题目链接 Description 桌子上有2n 堆石子,编号为1..2n.将第2k-1 堆与第2k 堆(1 ≤ k ≤ n)为同一组.第i堆的石子个数用一个正整数Si表示.一次分割操作指的是,从桌子上 ...

  8. 《Linux内核Makefile分析》之 auto.conf, auto.conf.cmd, autoconf.h【转】

    转自:http://blog.sina.com.cn/s/blog_87c063060101l25y.html 转载:http://blog.csdn.net/lcw_202/article/deta ...

  9. AC日记——N的倍数 51nod 1103

    1103 N的倍数 思路: 先计算出前缀和: 然后都%n: 因为有n个数,所以如果没有sum[i]%n==0的化,一定有两个取模后的sum相等: 输出两个sum中间的数就好: 来,上代码: #incl ...

  10. HDU 1568 Fibonacci【求斐波那契数的前4位/递推式】

    Fibonacci Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Proble ...