Vue 注冊組件

注冊組件

注冊組件的基本步驟

• 組件的使用分成三個步驟：

  • 創建組件構造器：調用Vue.extend()方法
  • 注冊組件：調用Vue.component()方法
  • 使用組件：在Vue實例的作用范圍內

• 我們來看看通過代碼如何注冊組件

<div id="app">
<!--3.使用組件-->
<my-cpn></my-cpn>

<script src="../js/vue.js"></script>
<script>
  // 1.創建組件構造器對象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是標題</h2>
        <p>我是內容, 哈哈哈哈</p>
        <p>我是內容, 呵呵呵呵</p>
      </div>`
  })
  // 2.注冊組件
  Vue.component('my-cpn', cpnC)
  
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>

• 查看運行結果：
  • 和直接使用一個div看起來並沒有什么區別。
  • 但是我們可以設想，如果很多地方都要顯示這樣的信息，我們是不是就可以直接使用<my-cpn></my-cpn>來完成呢？

注冊組件步驟解析

1. Vue.extend()：

• 調用Vue.extend()創建的是一個組件構造器。
• 通常在創建組件構造器時，傳入template代表我們自定義組件的模板。
• 該模板就是在使用到組件的地方，要顯示的HTML代碼。
• 事實上，這種寫法在Vue2.x的文檔中幾乎已經看不到了，它會直接使用下面我們會講到的語法糖，但是在很多資料還是會提到這種方式，而且這種方式是學習后面方式的基礎。

2. Vue.component()：

• 調用Vue.component()是將剛才的組件構造器注冊為一個組件，並且給它起一個組件的標簽名稱。
• 所以需要傳遞兩個參數：
  • 注冊組件的標簽名
  • 組件構造器

3. 組件必須掛載在某個Vue實例下，否則它不會生效。

• 我們來看下面我使用了三次<my-cpn></my-cpn>
• 而第三次其實並沒有生效

<div id="app">
  <!-- 使用組件 -->
  <my-cpn></my-cpn>
  <my-cpn></my-cpn>
</div>
  <my-cpn></my-cpn>

全局組件和局部組件

• 當我們通過調用Vue.component()注冊組件時，組件的注冊是全局的

  • 這意味着該組件可以在任意Vue示例下使用。

• 如果我們注冊的組件是掛載在某個實例中, 那么就是一個局部組件

<div id="app">
  <cpn></cpn>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.創建組件構造器
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是標題</h2>
        <p>我是內容,哈哈哈哈啊</p>
      </div>
    `
  })

  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {//注冊的局部組件
      // cpn使用組件時的標簽名
      cpn: cpnC
    }
  })

父組件和子組件

• 在前面我們看到了組件樹：

  • 組件和組件之間存在層級關系
  • 而其中一種非常重要的關系就是父子組件的關系

• 我們來看通過代碼如何組成的這種層級關系：

<div id="app">
  <parent-cpn></parent-cpn>
  <!--<child-cpn></child-cpn>-->
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.創建第一個組件構造器(子組件)
  const childComponent = Vue.extend({
    template: `
      <div>
        <h2>我是子組件</h2>
        <p>我是內容, 哈哈哈哈</p>
      </div>
    `
  })

  // 2.創建第二個組件構造器(父組件)
  const parentComponent = Vue.extend({
    template: `
      <div>
        <h2>我是父組件</h2>
        <p>我是內容, 呵呵呵呵</p>
        <child-cpn></child-cpn>
      </div>
    `,
    components: {
      child-cpn: childComponent
    }
  })

  // root組件
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      parent-cpn: parentComponent
    }
  })
</script>

• 父子組件錯誤用法：以子標簽的形式在Vue實例中使用
  • 因為當子組件注冊到父組件的components時，Vue會編譯好父組件的模塊
  • 該模板的內容已經決定了父組件將要渲染的HTML（相當於父組件中已經有了子組件中的內容了）
  • <child-cpn></child-cpn>是只能在父組件中被識別的。
  • 類似這種用法，<child-cpn></child-cpn>是會被瀏覽器忽略的。

注冊組件語法糖

• 在上面注冊組件的方式，可能會有些繁瑣。

  • Vue為了簡化這個過程，提供了注冊的語法糖。
  • 主要是省去了調用Vue.extend()的步驟，而是可以直接使用一個對象來代替。

• 語法糖注冊全局組件和局部組件：

<div id="app">
  <cpn1></cpn1>
  <cpn2></cpn2>
</div>

<script src="../js/vue.js"></script>
<script>
  // 1.全局組件注冊的語法糖
  Vue.component('cpn1', {
    template: `
      <div>
        <h2>我是標題1</h2>
        <p>我是內容, 哈哈哈哈</p>
      </div>
    `
  })

  // 2.注冊局部組件的語法糖
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    components: {
      'cpn2': {
        template: `
          <div>
            <h2>我是標題2</h2>
            <p>我是內容, 呵呵呵</p>
          </div>
                  `
      }
    }
  })
</script>

模板的分離寫法

• 剛才，我們通過語法糖簡化了Vue組件的注冊過程，另外還有一個地方的寫法比較麻煩，就是template模塊寫法。
• 如果我們能將其中的HTML分離出來寫，然后掛載到對應的組件上，必然結構會變得非常清晰。
• Vue提供了兩種方案來定義HTML模塊內容：
  • 使用<script>標簽
  • 使用<template>標簽

<!--1.script標簽, 注意:類型必須是text/x-template-->
<script type="text/x-template" id="cpn">
<div>
  <h2>我是標題</h2>
  <p>我是內容,哈哈哈</p>
</div>
</script>

<!--2.template標簽-->
<template id="cpn">
  <div>
    <h2>我是標題</h2>
    <p>我是內容,呵呵呵</p>
  </div>
</template>