Vue全局组件与局部组件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue全局组件与局部组件相关的知识，希望对你有一定的参考价值。
参考技术A 全局组件：只需要在main.js中导入一次，整个项目都可以直接使用。1、导入全局组件：
import popManager from './components/popManager.vue'
2、注册全局组件：
Vue.component('popManager',popManager)
局部组件：在需要用到的地方导入。
1、导入子组件：
import popManager from '../../components/popManager.vue'
2、注册子组件：
export default
components:
popManager
,
使用：
Vue:全局组件与局部组件
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
Vue.component(
‘alert‘,{
template:
‘<button @click="on_click">弹弹弹</button>‘
,
methods:{
on_click:function () {
alert(‘Yo.‘);
}
}
}
);
new Vue({
el:"#seg1"
})
</script>
</body>
</html>
局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="seg1">
<alert></alert>
</div>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script>
var alert_component={
template:
‘<button @click="on_click">弹弹弹</button>‘
,
methods:{
on_click:function () {
alert(‘Yo.‘);
}
}
};
new Vue({
el:"#seg1",
componets:{
alert:alert_component
}
})
</script>
</body>
</html>
以上是关于Vue全局组件与局部组件的主要内容，如果未能解决你的问题，请参考以下文章