詳解vue 組件

更新時(shí)間：2020年06月11日 11:50:01 作者：WilsonPan

這篇文章主要介紹了詳解vue 組件的相關(guān)知識，文中講解非常細(xì)致，代碼供大家參考學(xué)習(xí)，感興趣的朋友可以了解下

組件基礎(chǔ)

組件渲染過程

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

Vue組件需要編譯，編譯過程可能發(fā)生在

打包過程（使用vue文件編寫）
運(yùn)行時(shí)（將字符串賦值template字段，掛載到一個(gè)元素上并以其 DOM 內(nèi)部的 HTML 作為模板)

對應(yīng)的兩種方式 runtime-only vs runtime-compiler

runtime-only（默認(rèn)）

打包時(shí)只包含運(yùn)行時(shí)，因此體積更少
將template在打包的時(shí)候，就已經(jīng)編譯為render函數(shù)，因此性能更好

runtime-compiler

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

啟用runtime-compiler

vue.config.js（若沒有手動(dòng)創(chuàng)建一個(gè)）

module.exports = {
 runtimeCompiler: true //默認(rèn)false
}

組件定義

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

例子

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

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

2. 單文件組件（推薦）

創(chuàng)建.vue后綴的文件，定義如下

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

<template> 里只能有一個(gè)根節(jié)點(diǎn)，即第一層只能有一個(gè)節(jié)點(diǎn)，不能多個(gè)節(jié)點(diǎn)平級

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

組件注冊

1. 全局注冊

全局注冊是通過Vue.component()注冊

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

優(yōu)點(diǎn)

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

缺點(diǎn)

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

適合

基礎(chǔ)組件全局注冊

2. 局部注冊

在需要的地方導(dǎo)入

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

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

優(yōu)點(diǎn)

按需加載

缺點(diǎn)

每次使用必須導(dǎo)入，然后components指定

適合

非基礎(chǔ)組件

組件使用

組件復(fù)用

<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>

每個(gè)組件都會創(chuàng)建一個(gè)新實(shí)例，組件的data必須是function，因?yàn)槊總€(gè)實(shí)例維護(hù)自己的data數(shù)據(jù)

組件傳參

1. 通過props屬性

定義一個(gè)button，按鈕文本通過props傳入

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

調(diào)用者通過attribute傳入

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

運(yùn)行效果

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

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

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

調(diào)用者的innerHtml會替換插槽的值，若為空，使用默認(rèn)的

運(yùn)行效果

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

自定義事件

1. 在組件內(nèi)部調(diào)用this.$emit觸發(fā)自定義事件

<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. 調(diào)用者監(jiān)聽自定義事件

<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. 運(yùn)行效果