全局组件

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

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. swarm集群数据管理

    1.volume [root@manager ~]# docker service create --mount type=volume,src=vol1,dst=/usr/local/nginx/h ...

  2. group by timestamp

    SELECT DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * )  FROM test GROUP BY DATE_FORMAT ...

  3. BZOJ 3876 支线剧情

    支线剧情 [故事背景] 宅男JYY非常喜欢玩RPG游戏,比如仙剑,轩辕剑等等.不过JYY喜欢的并不是战斗场景,而是类似电视剧一般的充满恩怨情仇的剧情.这些游戏往往都有很多的支线剧情,现在JYY想花费最 ...

  4. hdu 3001 Travelling 经过所有点(最多两次)的最短路径 三进制状压dp

    题目链接 题意 给定一个\(N\)个点的无向图,求从任意一个点出发,经过所有点的最短路径长度(每个点至多可以经过两次). 思路 状态表示.转移及大体思路 与 poj 3311 Hie with the ...

  5. java-判断字符串是否为数字

    1.使用java自带的函数 public static boolean isNumeric1(String str){ int len=str.length(); if(len>1&&a ...

  6. eclipse去除所有调试断点 （转）

    今天调试的时候发现之前加了太多断点,想去除所有断点,才想起来一直都没有使用过这个功能,放狗搜了一下,很快找到,记录一下. 方法一: 在工作界面,点window菜单栏,选中Preperences,在Ge ...

  7. springboot 2.0.8 跳转jsp页面

    springboot项目创建教程 https://blog.csdn.net/q18771811872/article/details/88126835 springboot 2.0跳转 html教程 ...

  8. gradients的一些注意点

    Each variable has a [.grad_fn] attribute that references a Function that has created the Variable(ex ...

  9. IntelliJ IDEA安装MongoDB的的数据操作插件

    说明:只能说效果一般,没有Robo 3T那么好用. 参考: https://intellij-support.jetbrains.com/hc/en-us/community/posts/206635 ...

  10. ios iPhone 如何将应用程序名称本地化

    iPhone的应用程序名称也可以本地化,可以按照以下步骤来实施: 1. 修改项目目录下的’ -info.plist’文件名 将’ -info.plist’ 修改为 Info.plist 2. 将Inf ...