VueJS组件之全局组件与局部组件
2024-08-23 03:43:20
全局组件
所有实例都能用全局组件。
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内容。
最新文章
- C++ 代码优化
- Programming Entity Framework CodeFirst -- 约定和属性配置
- MySQL 优化之 Linux系统层面调优
- 数据库学习（-）--sqlserver数据类型
- P1017 进制转换
- JS手动创建标签
- perl 正则前导字符
- ranlib的作用 -----更新静态库的符号索引表
- Android 尺寸 神图
- 了解 : 多个Http请求设计方向 （batch）
- .net core 2.0学习笔记（三）：度量.net framework 迁移到.net core的工作量
- Asp.Net Web API（六）
- Android Screen Monito
- AC自动机解题记录
- RNA测序的质量控制
- Linux进程管理 简介
- python第九课——while死循环
- 7.Classes-类(Dart中文文档)
- apache主机（网站）配置，port监听，文件夹訪问权限及分布式权限
- 轻量ORM-SqlRepoEx （十四）最佳实践之Dapper（1）