Vue注册全局子组件和局部子组件
ps: 这里是使用vue-cli搭建的vue开发目录 1Vue注册全局子组件第1步: 创建子组件,代码如下 <template> <div id="header"> <div class="head">全局子组件</div> </div> </template>
<script> export default { } </script>
<style lang="scss"> #header { .head{ height: 40px; line-height: 40px; background-color: red; font-size: 16px; color: #fff; text-align: center; } } </style>第二步: 在main.js中注册子组件,代码如下: // main.js中的代码 ... import head from "./components/head"; // header Vue.component("headBar", head); ps: 这里的组件所在的目录, 需要看自己所创建的子组件的目录 1第三步, 使用子组件,代码如下: <template> <div id="my"> <!-- 头部 --> <headBar></headBar> </div> </template>
<script> export default { data(){ return {
} } } </script>
<style lang="scss">
</style>完成全局子组件的注册和使用 1Vue注册局部组件 第一步, 创建子组件, 代码如下: <template> <div id="bottom"> <div class="nav">底部导航栏</div> </div> </template>
<script> export default { data(){ return {
} } } </script>
<style lang="scss"> .nav { width: 100%; height: 40px; line-height: 40px; background-color: red; color: #fff; text-align: center; position: absolute; bottom: 0; left: 0; } </style>第二步, 注册并使用子组件
ps:局部子组件注册完成并使用。
