vue.js全局组件和局部组件示例代码
更新时间：2022年12月10日 10:18:13 作者：胖头小奶虎
组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
全局组件和局部组件
全局组件的定义的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>全局组件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 创建组件构造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容：小奶虎</p>
</div>
`
})
//注册组件(全局组件：意味着可以在多个Vue的实例下面使用)
Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
局部组件的定义的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>局部组件</title>
<script src="../../lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<cpn></cpn>
<cpn></cpn>
<cpn></cpn>
</div>
<div id="app2">
<cpn></cpn>
<cpn></cpn>
</div>
<script type="text/javascript">
// 创建组件构造器
const cpnC = Vue.extend({
template:`
<div>
<h2>我是标题</h2>
<p>我是内容：小奶虎</p>
</div>
`
})
//注册组件(全局组件：意味着可以在多个Vue的实例下面使用)
// Vue.component('cpn',cpnC);
var app = new Vue({
el: "#app",
data:{
message:"hello vue"
},
components:{
//cpn：使用组件时的标签名
//此时注册的是局部组件
cpn:cpnC
}
});
var app2 = new Vue({
el:"#app2",
data:{
message:"hello Vue"
}
});
</script>
</body>
</html>
附：自定义全局组件
全局组件用到的是 Vue.component(tagName,option)，tagName是自定义的组件名称,option是组件构造器。具体使用方法如下：
在main.js中设置：
Vue.component('my-component', {
template: '<button v-on:click="clickShow">切换<h1 v-show="show">全局组件的学习</h1></button>',
data () {
return {
show: true
}
},
methods:{
clickShow(){
this.show = !this.show
}
}
})
在组件中直接引用：
<template>
<div>
<my-component ></my-component>
</div>
</template>
渲染结果为：
总结
到此这篇关于vue.js全局组件和局部组件的文章就介绍到这了,更多相关vue.js全局组件和局部组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于利用vue+elementUI实现部分引入组件的相关资料，以及介绍了vue引入elementUI报错的解决方法，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-11-11
vue3(optionApi)使用Element Plus库没有效果的解决方式
这篇文章主要介绍了vue3(optionApi)使用Element Plus库没有效果的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
许多朋友想要材料上传之后点击预览实现在浏览器上预览的效果,所以本文将给大家介绍如何使用vue实现pdf预览功能,文中有实现代码,有需要的朋友可以参考阅读下2023-08-08
这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要介绍了vue封装swiper代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue2.0如何动态绑定img的src属性(三元运算)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
前后端同时开发的时候,后端接口数据没有出来,前端可以使用mock模拟假数据,所以下面小编就来为大家详细介绍一下如何在Vue3中使用mock.js模拟数据吧2025-03-03
VUE2响应式原理使用Object.defineProperty缺点
这篇文章主要为大家介绍了VUE2响应式原理使用Object.defineProperty缺点示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了element-ui table表格底部合计自定义配置过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
一直对编译原理的东西都有一种恐惧感，感觉太难了，看不懂，打开vue3源码看到编译相关的代码，直接吓退。不要担心，小编今天带你一文吃透Vue3编译原理2023-02-02
最新评论