vue组件化思想、全局组件和局部组件的使用

组件是什么？

组件（Component）是前端在单页面应用（SPA）上最好的一种实现方式，把所有功能模块拆解成单独的组件，每个组件都有独立的作用域，且还可以相互通信。

组件化思想

1.将功能模块组件化，能提高代码复用性以及开发效率。

2.减小了beg调试区域，简化调试步骤。

3.有利于多人协作开发。

非单文件组件

一个文件中可以定义多个组件，使用.html文件后缀，而单文件组件是一个文件仅包含一个组件，使用.vue文件后缀。

组件注册方式

全局：可以在任何组件中直接使用标签，而不需要在各个组件中引入注册

局部：需引入和注册使用

1. 全局注册 vue3

在main.js中添加Header.vue组件的注册

//引入组件
import Header from './pages/Header.vue'
//在这中间写全局组件的注册
app.component("Header",Header)

2. 全局注册 vue2

在main.js中添加Header.vue组件的注册

import Header from './pages/Header.vue'
//我们通过Vue.component全局api实现了全局注册，在业务组件中就不需要再引入和注册了，直接使用即可
Vue.component("Header",Header)

3. 全局注册 html

<div id="app1">
    //使用组件的范围，必须是在Vue实例范围（id:app容器）中使用
  <cpn1></cpn1>  
</div>
<cpn1></cpn1> //放在这不在Vue实例中使用是不会生效的
​
<div id="app2">
    //使用组件的范围，必须是在Vue实例范围（id:app容器）中使用
  <cpn1></cpn1>  //全局组件，放在实例化对象2也可以使用
</div>
​
<script src="../js/vue.js"></script>
<script>
  // 1.全局组件注册的语法糖
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是内容, 哈哈哈哈</p>
      </div>
    `
  })
  // 2.vue实例化,实例化必须放在注册后面
  const app1 = new Vue({
    el: '#app1'
  })
  const app2 = new Vue({
    el: '#app'
  })
</script>

1. 局部注册 vue

在单页面中局部注册组件

<template>
<!-- 第三步：显示组件 -->
<Header></Header>
</template>
​
<script>
//第一步：引入组件
import Header from "./pages/Header.vue";
​
//第二步：注入组件
export default{
  components:{
    Header
  }
}
</script>

在App.vue中修改Header组件引用方式

<template>
<!-- 第三步：显示组件 -->
<!-- <Header></Header> -->
<!-- 使用通过main.js的全局组件注册，显示组件 -->
<Header></Header>
<Main></Main>
<Aside></Aside>
</template>
​
<script>
//第一步：引入组件
//局部注册方式
// import Header from "./pages/Header.vue";
import Main from "./pages/Main.vue";
import Aside from "./pages/Aside.vue";
​
//第二步：注入组件
export default{
  components:{
    //局部注册方式
    // Header,
    Main,
    Aside
  }
}
</script>

2. 局部注册 html

<div id="app1">
  <cpn2></cpn2>
</div>
​
<div id="app2">
  <cpn2></cpn2> //在app1局部注册的组件，在第二个实例不能使用不会被解析
</div>
​
<script src="../js/vue.js"></script>
<script>
  // 2.注册局部组件的语法糖
  const app1 = new Vue({
    el: '#app1',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是标题2</h2>
            <p>我是内容, 呵呵呵</p>
          </div>
                  `
      }
    }
  })
  
  const app2 = new Vue({
                el: '#app2'
            })
</script>

APP.vue 根组件创建 vue 实例

1. vue2

   APP.vue中：
   //vue2.0中必须要有一个根元素
   <template>
     <div id="app">
       <router-view />
     </div>
   </template>
   ​
   main.js中：
   //先引入
   import App from "./App";
   //vue实例 #app作用是把 App 组件挂载到html id 为 app 的 DOM 节点上
   v2.0 + ES6写法
   //本来此文件是用来给App组件进行注册并且使用template来渲染App组件的，但是现在并没有给App组件注册也没有使用template来渲染App组件。仅仅只有一个rander函数
   new Vue(
     { //render函数的参数就是一个函数，用来渲染内容。
        render: h => h(App) //将组件直接放到函数中当参数，就可以将组件进行渲染。
   ).$mount('#app')

2. vue3
    

   APP.vue中：
   //vue3中的app单文件不再强制要求必须有根元素
   <template>
     <router-view />
   </template>
   ​
   main.js中：
   import { createApp } from 'vue'
   import App from './App'
   const app = createApp(App)
   app.mount('#app')