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局部组件的使用:生子 - 挂子 - 用子 & ...
随机推荐
- 如何理解显示卡的驱动模块（DDX,DRM,DRI,XVMC）
如何理解显示卡的驱动模块(DDX,DRM,DRI,XVMC) 1)DDX是什么 DDX是X服务器的2D驱动模块,例如via_drv.so. 2D的显示加速,包括xvideo也是由它负责. 它会初始化硬 ...
- bzoj 2387: [Ceoi2011]Traffic
bzoj 2387: [Ceoi2011]Traffic 题目描述 The center of Gdynia is located on an island in the middle of the ...
- Codeforces Round #316 (Div. 2) C 思路/模拟
C. Replacement time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- HTML表格嵌套、合并表格
一.表格元素< table> table常用属性 border:边框像素 width,height:表格宽度/高度 bordercolor:表格边框颜色 bgcolor:表格背景颜色 二. ...
- mongodb学习（3）--- NodeJs使用mongoose操作mongodb
转载: https://cnodejs.org/topic/50c145ed637ffa4155c7eaee 首先对于以下错误说明(有写 db.close): Error: db object alr ...
- angular-关于分页
列表渲染数据量庞大的时候,我们需要用到一个filter来控制我们的列表进行循环渲染. 这就要用到一个filter,limitTo. 在此,我使用了变量来进行控制,可以随时调换每页的数量,并且配合分页按 ...
- ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: YES)
ERROR 1045 (28000): Access denied for user 'ODBC'@'localhost' (using password: NO) ERROR 1045 (28000 ...
- [LeetCode] Search in Rotated Sorted Array II 二分搜索
Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed? Would this ...
- ext2/3/4的inode结构说明
系统环境:Ubuntu15.10/ext4 今天在复习<鸟哥的私房菜-基础学习篇>,看到inode大小为128bytes,想看下这128字节里面到底是什么样的. 于是我查了下google, ...
- Linux常用命令使用
系统基础相关 使用root用户的环境变量切换到root用户 su - 显示当前工作路径 pwd 显示当前系统默认语言及键盘布局 localectl 显示系统中能支持的所有语言 localectl li ...