10.(VueComponent)組件化開發

一.什么是組件化

vue.js 有兩大法寶，一個是數據驅動，另一個就是組件化，那么問題來了，什么叫做組件化，為什么要組件化？接下來我就針對這兩個問題一一解答，所謂組件化，就是把頁面拆分成多個組件，每個組件依賴的 CSS、JS、模板、圖片等資源放在一起開發和維護。 因為組件是資源獨立的，所以組件在系統內部可復用，組件和組件之間可以嵌套，如果項目比較復雜，可以極大簡化代碼量，并且對后期的需求變更和維護也更加友好。

image.png

二.如何注冊組件

2.1 非單文件注冊組件

2.1.1 如何定義一個子組件？

  1. 如何定義一個組件？--使用Vue.extends(options)去創建

  2. javaScript本質上是一個函數，我們后面寫<javaScript/>,Vue幫我們去new JavaScript

    1. console.log(typeof (javaScript)); //function

  3. Vue.extends(options)中的options是配置對象，這個配置和我們new Vue(options)一樣，區別如下：

      3.1 **不能有el屬性去指定容器**

       原因：所有組件實例最終要被一個VM所管理，vm中會指定好el,即：組件讓位給那個容器
image-20210709201849339
    3.2 **data必須寫成函數**

         原因：==為了確保多個組件內的數據不會相互污染==

    3.3 **組件內的模板解構要配置在template里面，**

        1.使用模板字符串

        2.模板字符串必須只有一個根標簽

  1. ==組件命名方式，盡量用短橫線，用駝峰命名，使用時也得是短橫線。==最好就別用駝峰命名組件了

    Vue.component('HelloWorld', ....... });
<hello-world></hello-world>

2.1.2 注冊一個組件

2.1 全局注冊:

 ```
 Vue.component(組件名, 組件)
 ```

2.2 局部注冊:局部組件只能在注冊他的父組件中使用

 在vm里添加一個components里注冊

2.3 全局組件個局部組件的區別：

全局組件是掛載在 Vue.options.components 下，而局部組件是掛載在 vm.$options.components 下，這也是全局注冊的組件能被任意使用的原因。

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非單文件組件</title>
  </head>

  <body>
    <div id="app">
      <h1>父組件</h1>
      <h1>{{msg}}</h1>
      <p>------------------------------</p>
      <javascript></javascript>
    </div>

  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    一.如何定義一個子組件？
      1.如何定義一個組件？--使用Vue.extends(options)去創建
      2.javaScript本質上是一個函數，我們后面寫<javaScript/>,Vue幫我們去new JavaScript
      3.Vue.extends(options)中的options是配置對象，這個配置和我們new Vue(options)一樣，區別如下：
        3.1 不能有el屬性去指定容器
            原因：所有組件實例最終要被一個VM所管理，vm中會指定好el,即：組件讓位給那個容器
        3.2 data必須寫成函數
            原因：為了確保多個組件內的數據不會相互污染
        3.3 組件內的模板解構要配置在template里面，
          1. 使用模板字符串
          2.模板字符串必須只有一個根標簽
    二.注冊一個組件
      2.1 全局注冊
          Vue.component(組件名, 組件)
      2.2 局部注冊      
          在vm里添加一個components里注冊
    */
    //1.定義一個組件
    const javaScript = Vue.extend({
      // el: "#app",
      data() {
        return {
          course: "javaScript"
        }
      },
      template: `
      <div>
        <h2>我是JS子組件</h2>
        <h2>{{course}}</h2>
      </div>`
    })

    // 2.全局注冊一個組件
    Vue.component('javascript', javaScript)

    // console.log(typeof (javaScript)); //function
    
    // 定義一個vm,去管理所有的組件
    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "編程課程",
        }
      },
    })
  </script>

</html>
image-20210709202456247

2.2 單文件注冊組件

2.2.1 什么是單文件組件：

把一個組件全部內容匯合到一個文件中，文件名字是以 .vue 結尾的就稱作 vue單文件組件

2.2.2 最簡單使用

  • 通過Vuecli創建一個空的項目并運行
  • 創建單文件組件 src/component/01.單文件組件.vue
  • src/main.js 文件中導入、注冊組件
  • public/index.html 文件 使用 單文件組件

2.2.3 組織結構

<template>
  相關html標簽
</template>

<script>
  export default {
    data,
    methods,
    computed,
    filters,
    created,
    ……
  }
</script>

<style>
  css樣式內容
</style>

三. 全局注冊和局部注冊

3.1 全局注冊:

在 vue.js 中我們可以使用 Vue.component(tagName, options) 進行全局注冊，例如

 ```

Vue.component(組件名, 組件)
或
Vue.component('my-component', {
// 選項
})
```

3.2 局部注冊:局部組件只能在注冊他的父組件中使用

Vue.js 也同樣支持局部注冊，我們可以在一個組件內部使用 components 選項做組件的局部注冊，例如：

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

在vm里添加一個components里注冊

3.3 全局組件個局部組件的區別：

==全局組件是掛載在 Vue.options.components 下，而局部組件是掛載在 vm.$options.components 下，這也是全局注冊的組件能被任意使用的原因==

四.==理解Vue,VueComponent,VueModel之間的關系==

一.特別提示：

  1. Student確實是構造函數，但不是我們親手寫的Student，是Vue.extend生成的。
  2. Vue.extend調用的返回值是VueComponent構造函數，所以new Student其實就是在new VueComponent.
  3. 所謂組件實例，就是VueComponent創建的實例，簡稱vc
    所謂Vue實例，就是Vue創建的實例，簡稱vm

二.最重要的關系總結：
==VueComponent繼承了Vue,所以Vue.prototype上得屬性和方法，vc度可以看得見==

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非單文件組件2</title>
  </head>

  <body>
    <div id="app">
      <h1>------------App組件---------------</h1>
      <h1>{{msg}}</h1>
      <Person></Person>
      <Student></Student>
    </div>
    <template id="p">
      <div>
        <h1>-----------Person對象-------------</h1>
        <h2>{{msg}}</h2>
      </div>
    </template>
    <template id="s">
      <div>
        <h1>-----------Student對象-------------</h1>
        <h2>{{msg}}</h2>
      </div>
    </template>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    /* 
    三.特別提示：
        3.1 Student確實是構造函數，但不是我們親手寫的Student，是Vue.extend生成的。
        3.2 Vue.extend調用的返回值是VueComponent構造函數，所以new Student其實就是在new VueComponent.
        3.3 所謂組件實例，就是VueComponent創建的實例，簡稱vc
            所謂Vue實例，就是Vue創建的實例，簡稱vm
    四.最重要的關系總結：
        VueComponent繼承了Vue,所以Vue.prototype上得屬性和方法，vc度可以看得見  
    
    */
    Vue.config.productionTip = false;
    const Person = Vue.extend({
      data() {
        return {
          msg: "我是一個Person對象"
        }
      },
      template: '#p'
    })

    Vue.prototype.xyz = 100;

    const Student = Vue.extend({
      data() {
        return {
          msg: "我是一個Student對象"
        }
      },
      template: '#s'
    })

    /* Vue.component('Person', Person)
    Vue.component('Student', Student) */

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          msg: "Hello Vue"
        }
      },
      components: {
        Student,
        Person,
      }
    })
    // vm.$children[0].__proto__.__proto__ === Vue.prototype //true
    // vm.$children[0].__proto__ instanceof Vue //true
  </script>

</html>
image-20210710235623545

接上圖

image-20210710235931386
image-20210711000033207
VueExtend
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Vue 組件化介紹 組件化是 Vue 的精髓, Vue 就是由一個一個的組件構成的 組件化思想是筆者認為世界上最美...
    coderlion閱讀 812評論 0贊 0
  • 此筆記是我在拉勾學習課程過程中的總結，文字原創，筆記里很多技巧和知識是老師總結的，如果有侵權，請聯系本人！ 組件化...
    你好肥貓閱讀 518評論 0贊 2
  • 組件化開發思想 現實中的組件化思想體現（1）標準（2）分治（3）重用（4）組合 編程中的組件化思想體現 組件化規范...
    遼A丶孫悟空閱讀 1,901評論 1贊 19
  • 1. 組件化跟模塊化的區別 組件的出現就是為了拆分 vue 實例的龐大內容的，我們可以以不同的組件來劃分不同的功能...
    Metallica_d8b1閱讀 451評論 0贊 0
  • 作者：陸國圣 編輯：Sammi 什么是前端組件化開發? 我們在前端項目的開發流程中，把一個需求在一定的顆粒度范圍內...
    Kyligence閱讀 1,875評論 0贊 7