首页 > 代码库 > VueJS组件之全局组件与局部组件
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组件之全局组件与局部组件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。