Vue的兩大核心

1. 資料驅動 - 資料驅動介面顯示

2. 模組化 - 複用公共模組，元件實現模組化提供基礎

元件基礎

元件渲染過程

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

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

（1）打包過程 （使用vue檔案編寫）

（2）執行時（將字串賦值template欄位，掛載到一個元素上並以其 DOM 內部的 HTML 作為模板)
對應的兩種方式 runtime-only vs runtime-compiler

runtime-only（預設）

（1）打包時只包含執行時，因此體積更少

（2）將template在打包的時候，就已經編譯為render函式，因此效能更好

runtime-compiler

（1）打包時需要包含（執行時 + 編譯器），因此體積更大，大概多10Kb

（2）在執行的時候才把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會替換插槽的值，若為空，使用預設的

執行效果

注意：看到是用自定義元件的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. 執行效果

以上就是詳解vue 元件的詳細內容，更多關於vue元件的資料請關注我們其它相關文章！