全局组件

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

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. pat 团体天梯赛 L3-009. 长城

    L3-009. 长城 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 邓俊辉(清华大学) 正如我们所知,中国古代长城的建造是为了抵御外 ...

  2. onCreate、onStart、onResume、onPause、onStop、onDestory（转）

    程序正常启动:onCreate()->onStart()->onResume();正常退出:onPause()->onStop()->onDestory() 一个Activit ...

  3. mybatis 判断参数有没有传入

    <!--审核展示列表--> <select id="auditResList" resultType="java.util.HashMap"& ...

  4. python c++ Visual Studio相关 Unable to find vcvarsall.bat问题

    使用Cython编译包的时候报错: Unable to find vcvarsall.bat 说明:https://jingyan.baidu.com/article/adc815138162e8f7 ...

  5. java使用dbutils工具类实现小程序 管家婆记账软件

    1.所需创建的包和 jar包 2.创建表结构  #生成一些表数据 ,,'交通银行','2016-03-02','家庭聚餐'); ,,'现金','2016-03-15','开工资了'); ,,'现金', ...

  6. Android Studio查看其它APP的布局结构

    概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 (2)运行Android Studio,打开 ...

  7. cogs——1008. 贪婪大陆（清华巨佬代码）——树状数组

    1008. 贪婪大陆 ★★   输入文件:greedisland.in   输出文件:greedisland.out   简单对比时间限制:1 s   内存限制:128 MB 试题四:贪婪大陆  [题 ...

  8. Codeforces Round #324 (Div. 2) Olesya and Rodion 构造

    原题链接:http://codeforces.com/contest/584/problem/A 题意: 给你n和t,让你构造一个长度为n的数,并且被t整除 题解: 方法很多,可以乱构造.....不过 ...

  9. 轻量i3wm配置使用笔记 -- 主题切换器（j4-make-config）

    快速切换主题 j4-make-config介绍: j4-make-config脚本可以方便地在几组"主题"之间切换,还可以根据当前工作的环境,轻松地从几个不同的配置部分组合一个完整 ...

  10. UVA 133“The Dole Queue”（循环报数处理技巧）

    •参考资料 [1]:紫书P82 •题意(by紫书) 按照被选中的次序输出这 n 个人的编号: 如果A和B选中的是同一个人,输出一个这个人的编号: 输出格式:输出的每个编号占3个字节,不够3个字节在前面 ...