Vue（十八）httpVueLoader：组件的全局注册和局部注册
单文件中的全局注册<template><div class="home"><my-header></my-header></div></template><script>//引入，相当于importconst Header = httpVueLoader('./Header.vue');//全局注册Vue.comp
·
注意：httpVueLoader加载的单文件导出方式不同：module.exports = {}，而不是export default {}
单文件中的全局注册
<template>
<div class="home">
<my-header></my-header>
</div>
</template>
<script>
//引入，相当于import
const Header = httpVueLoader('./Header.vue');
//全局注册
Vue.component('my-header', Header);
module.exports = {
data() {
return {
};
}
};
</script>
<style scoped>
.home {
font-size: 24px;
font-weight: bold;
}
</style>
单文件中的局部注册
<template>
<div class="home">
<my-header></my-header>
</div>
</template>
<script>
//引入 相当于import
const Header = httpVueLoader('./Header.vue');
module.exports = {
data() {
return {
msg: '主页内容'
};
},
//局部注册
components:{
'my-header':Header
}
};
</script>
<style scoped>
.home {
font-size: 24px;
font-weight: bold;
}
</style>
Html中注册组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./static/js/vue.js"></script>
<script src="./static/js/vue-router.js"></script>
<script src="./static/js/httpVueLoader.js"></script>
</head>
<body>
<div id="app">
<myheader></myheader>
</div>
</body>
<script>
<!-- 命名全部小写、或者下划线隔开，【中划线或驼峰会报错】 -->
const myheader = httpVueLoader('./static/components/Header.vue')
new Vue({
el: '#app',
data: {
msg: '哈哈'
},
components: {
myheader
}
})
</script>
</html>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献28条内容
所有评论(0)