VueJS组件之全局组件与局部组件
全局组件
所有实例都能用全局组件。
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组件之全局组件与局部组件的更多相关文章
- vue组件调用(全局调用和局部调用)
当用vue-cli创建一个项目后, 创建项目的方法: https://www.cnblogs.com/fps2tao/p/9376847.html 编写了组件怎么,在其他组件中调用了? 组件listB ...
- Vue学习-组件的基本使用（局部组件）
目录 示例代码 1.创建组件(构造器对象创建-Vue.extend) 2.注册组件 3.使用组件 4.语法糖创建并注册组件 示例代码 http://jsrun.net/H8vKp/edit 1.创建组 ...
- Vue（2）- v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- Vue 2 --v-model、局部组件和全局组件、父子组件传值、平行组件传值
一.表单输入绑定(v-model 指令) 可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. ...
- vue（3）—— vue的全局组件、局部组件
组件 vue有局部组件和全局组件,这个组件后期用的会比较多,也是非常重要的 局部组件 template与components属性结合使用挂载 其中 Vmain.Vheader.Vleft.Vconte ...
- vue 组件 全局注册和局部注册
全局注册,注册的组件需要在初始化根实例之前注册了组件: 局部注册,通过使用组件实例选项注册,可以使组件仅在另一个组件或者实例的作用域中可用: 全局组件 js Vue.component('tab-ti ...
- vue组件化初体验 全局组件和局部组件
vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件 关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...
- Vue其他指令-组件-全局-局部-组件的交互父传子
v-once指令 once:一旦,当...时候 <!DOCTYPE html> <html lang="zh"> <head> <meta ...
- vue中的全局组件和局部组件的应用
1全局组件 vue框架: https://www.vue-js.com/?tab=all 组件树 solt 内置分发组件 应用见局部组件 2局部组件 2.1局部组件的使用:生子 - 挂子 - 用子 & ...
随机推荐
- 自动从网站上面下载文件 .NET把网站图片保存到本地
原文发布时间为:2009-11-19 -- 来源于本人的百度文章 [由搬家工具导入] 自动从网站上面下载文件 .NET把网站图片保存到本地简单范例：这个范例是把百度联盟这个logo保存到根目录下面，当 ...
- 【eclipse】导入/导出开发环境(包括编辑器字体颜色大小等)
Eclipse的 File -> Export(导出),在窗口中展开 General(常规) -> Perferences(首选项)-->Export all(全部导出)然后点击 N ...
- 64位linux 汇编
c源码:testg.c 1 #include<stdio.h> 2 3 #define s ...
- hdu 1788(多个数的最小公倍数)
Chinese remainder theorem again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 ...
- Android Studio查看其它APP的布局结构
概述 日常使用别家的APP过程中,会遇到一些比较好看的布局,这时候我们就想学习一下别人的布局结构,以便参考. (1)手机连接电脑.设置手机为USB调试模式 (2)运行Android Studio,打开 ...
- 牛客网 牛客练习赛13 B.幸运数字Ⅱ-数组 or DFS
B.幸运数字Ⅱ 链接:https://www.nowcoder.com/acm/contest/70/B来源:牛客网 这个题就是找出来数据范围内的所有的幸运数,然后直接区间累加起来就可以了. ...
- python画直线
#!/usr/bin/env python import matplotlib.pyplot as plt import numpy as np #beita = 1 #gama = 0.5 #x:f ...
- SDOI 2015 约束个数和
Description: 共\(T \le 5 \times 10^4\)组询问, 每组询问给定\(n\)和\(m\), 请你求出 \[ \sum_{i = 1}^n \sum_{j = 1}^m \ ...
- NOI模拟题6 Problem C: Circle
Solution 首先这个矩阵, 很明显的就是Vandermonde矩阵. 我们有公式: \[ |F_n| = \prod_{1 \le j < i \le n} (a_i - a_j) \] ...
- MySQL OCP
http://www.royalwzy.com/ http://www.aixchina.net/home/space.php?uid=898169