vue.js全局组件和局部组件示例代码
短信预约 -IT技能 免费直播动态提醒
全局组件和局部组件
全局组件的定义的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="xiaonaihu" />
<meta name="generator" content="HBuilder X" />
<title>全局组件</title>
<script class="lazy" data-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 class="lazy" data-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全局组件和局部组件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
