【Vue】組件

Vue的兩大核心

1. 數據驅動 - 數據驅動界面顯示
2. 模塊化 - 復用公共模塊，組件實現模塊化提供基礎

組件基礎

組件渲染過程

template ---> ast（抽象語法樹） ---> render ---> VDom(虛擬DOM) ---> 真實的Dom ---> 頁面

Vue組件需要編譯，編譯過程可能發生在

• 打包過程 （使用vue文件編寫）
• 運行時（將字元串賦值template欄位，掛載到一個元素上並以其 DOM 內部的 HTML 作為模板)

對應的兩種方式 runtime-only vs runtime-compiler

runtime-only（預設）

• 打包時只包含運行時，因此體積更少
• 將template在打包的時候，就已經編譯為render函數，因此性能更好

runtime-compiler

• 打包時需要包含（運行時 + 編譯器），因此體積更大，大概多10Kb
• 在運行的時候才把template編譯為render函數，因此性能更差

啟用runtime-compiler

vue.config.js（若沒有手動創建一個）

module.exports = {
    runtimeCompiler: true      //預設false
}

組件定義

1. 字元串形式定義（不推薦）

例子

const CustomButton = {
  template: "<button>自定義按鈕</button>"
};

這種形式在運行時才把template編譯成render函數，因此需要啟用運行時編譯（runtime-compiler）

2. 單文件組件（推薦）

創建.vue尾碼的文件，定義如下

<template>
  <div>
    <button>自定義按鈕</button>
  </div>
</template>

<template> 里只能有一個根節點，即第一層只能有一個節點，不能多個節點平級

這種形式在打包的時就編譯成render函數，因此跟推薦這種方式定義組件

組件註冊

1. 全局註冊
全局註冊是通過Vue.component()註冊

import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)

優點

• 其他地方可以直接使用
• 不再需要components指定組件

缺點

• 全局註冊的組件會全部一起打包，增加app.js體積

適合

• 基礎組件全局註冊

2. 局部註冊

在需要的地方導入

<template>
  <div id="app">
    <customButton></customButton>
  </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
  name: "App",
  components: { CustomButton }
};
</script>

優點

• 按需載入

缺點

• 每次使用必須導入，然後components指定

適合

• 非基礎組件

組件使用

組件復用

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <customButton></customButton>
    <customButton></customButton>
    <customButton></customButton>
  </div>
</template>

customButton 組件

<template>
  <div id="app">
    <button @click="increment">click me {{times}} times</button>
  </div>
</template>
<script>
export default {
  data() {
    return { times: 0 };
  },
  methods: {
    increment() {
      return this.times++;
    }
  }
};
</script>

每個組件都會創建一個新實例，組件的data必須是function，因為每個實例維護自己的data數據

組件傳參

1. 通過props屬性

定義一個button，按鈕文本通過props傳入

<template>
  <button> {{buttonText}} </button>
</template>
<script>
export default {
  props: {
    buttonText: String
  }
};
</script>

調用者通過attribute傳入

<customButton buttonText="Button 1"></customButton>
<customButton buttonText="Button 2"></customButton>
<customButton buttonText="Button 3"></customButton>

運行效果

2. 通過插槽<slot></slot>

組件在需要替換的地方放入插槽<slot></slot>

<template>
  <button style="margin:10px"><slot>Defalt Button</slot></button>
</template>
<script>
export default {
  props: {
    buttonText: String
  }
};
</script>

調用者的innerHtml會替換插槽的值，若為空，使用預設的

<customButton></customButton>
<customButton><span style="color:blue">Button 2</span></customButton>
<customButton>Button 3</customButton>

運行效果

註意：看到是用自定義組件的innerHtml替換插槽，若插槽只有一個，可以不寫name attribute，若多個插槽需指定插槽name attribute

自定義事件

1. 在組件內部調用this.$emit觸發自定義事件

<template>
  <div style="margin:10px">
    <button @click="increment">
      <slot>Defalt Button</slot>
    </button>
    <span>Click me {{times}} times</span>
  </div>
</template>
<script>
export default {
  props: {
    buttonText: String
  },
  data() {
    return { times: 0 };
  },
  methods: {
    increment() {
      this.times++;
        ("increment");
    }
  }
};
</script>

2. 調用者監聽自定義事件

<template>
  <div id="app">
    <customButton @increment="handleIncrement"></customButton>
    <customButton @increment="handleIncrement">
      <span style="color:blue">Button 2</span>
    </customButton>
    <customButton @increment="handleIncrement">Button 3</customButton>
    <p>Total click {{totalClicks}} times</p>
  </div>
</template>
<script>
import CustomButton from "./components/ComponentDemo.vue";

export default {
  name: "App",
  components: { CustomButton },
  data() {
    return { totalClicks: 0 };
  },
  methods: {
    handleIncrement() {
      this.totalClicks++;
    }
  }
};
</script>

3. 運行效果

轉發請標明出處：https://www.cnblogs.com/WilsonPan/p/12763404.html