Vue — 组件化开发

2024-11-14 07:45:27

组件化开发：一个页面可以拆分成一个个组件；每个组件都有自己独立的结构、样式、行为

组件分类：普通组件、根组件

其中根组件包裹着所有普通小组件

普通组件的注册使用；有两种注册方式
- 局部注册
- 全局注册

局部注册

目标：

根组件（App.vue）：

<template>
  <div class="App">
    <!-- 头部组件 -->

    <!-- 主体组件 -->

    <!-- 底部组件 -->
  </div>
</template>

<script>
export default {

}
</script>

<style>
.App{
  width:600px;
  height:700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding:20px;
}
</style>

创建组件 -> 往components里建

HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .hm-header {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        background-color: #8064a2;
        color: white;
    }
</style>

在使用的组件内部导入、注册、使用

导入

使用

完整代码：

App.vue

<template>
  <div class="App">
    <!-- 当成html标签使用：<组件名></组件名> -->
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>
  </div>
</template>

<script>
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  //局部注册
  components:{
    // 组件名：组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App{
  width:600px;
  height:700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding:20px;
}
</style>

components -> HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
    .hm-header {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        background-color: #8064a2;
        color: white;
    }
</style>

components -> HmMain.vue

<template>
    <div class="hm-main">
      我是hm-main
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
      .hm-main {
          height: 500px;
          line-height: 500px;
          text-align: center;
          font-size: 30px;
          background-color: #f79646;
          color: white;
          margin:20px 0;
      }
  </style>

components -> HmFooter.vue

<template>
    <div class="hm-footer">
      我是hm-footer
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
      .hm-footer {
          height: 100px;
          line-height: 100px;
          text-align: center;
          font-size: 30px;
          background-color: #4f81bd;
          color: white;
      }
  </style>

全局注册

先来看一下局部注册按钮

只能在注册的组件内使用

目标：

1.创建组件

2.导入、注册、使用

再来看一下全局注册通用按钮

目标：

在所有的组件范围内都能直接使用

创建组件 -> 往components里建

导入、注册 （在main.js里进行全局注册）

使用 <组件名></组件名>

完整代码：

App.vue

<template>
  <div class="App">
    <!-- 当成html标签使用：<组件名></组件名> -->
    <!-- 头部组件 -->
    <HmHeader></HmHeader>
    <!-- 主体组件 -->
    <HmMain></HmMain>
    <!-- 底部组件 -->
    <HmFooter></HmFooter>
  </div>
</template>

<script>
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {
  //局部注册
  components:{
    // 组件名：组件对象
    HmHeader: HmHeader,
    HmMain,
    HmFooter
  }
}
</script>

<style>
.App{
  width:600px;
  height:700px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding:20px;
}
</style>

main.js

// 入口文件；第一个执行的文件；基于App.vue创建结构渲染index.html
// 导入Vue
import Vue from 'vue'
// 导入App.vue
import App from './App.vue'

import HmButton from './components/HmButton'

//提示当前处于什么环境（生产环境 / 开发环境)
Vue.config.productionTip = true //开发环境


// Vue.component('组件名'，组件对象)
Vue.component('HmButton',HmButton)


new Vue({
  render: h => h(App)
}).$mount('#app')

components -> HmButton.vue

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
    .hm-button {
        height:50px;
        line-height:50px;
        padding:0 20px;
        background-color: #3bae56;
        border-radius:5px;
        color:white;
        border:none;
        /* 垂直对齐 */
        vertical-align: middle;
        cursor:pointer;
    }
</style>

components -> HmHeader.vue

<template>
  <div class="hm-header">
    我是hm-header
    <HmButton></HmButton>
  </div>
</template>

<script>

export default {
  
}
</script>

<style>
    .hm-header {
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 30px;
        background-color: #8064a2;
        color: white;
    }
</style>

components -> HmMain.vue

<template>
    <div class="hm-main">
      我是hm-main
      <HmButton></HmButton>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
      .hm-main {
          height: 450px;
          line-height: 500px;
          text-align: center;
          font-size: 30px;
          background-color: #f79646;
          color: white;
          margin:20px 0;
      }
  </style>

components -> HmFooter.vue

<template>
    <div class="hm-footer">
      我是hm-footer
      <HmButton></HmButton>
    </div>
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
      .hm-footer {
          height: 100px;
          line-height: 100px;
          text-align: center;
          font-size: 30px;
          background-color: #4f81bd;
          color: white;
      }
  </style>

码农公寓

局部注册

全局注册

相关文章