Vue的兩大核心
- 數(shù)據(jù)驅(qū)動 - 數(shù)據(jù)驅(qū)動界面顯示
- 模塊化 - 復(fù)用公共模塊，組件實現(xiàn)模塊化提供基礎(chǔ)
組件基礎(chǔ)
組件渲染過程
template ---> ast（抽象語法樹） ---> render ---> VDom(虛擬DOM) ---> 真實的Dom ---> 頁面
Vue組件需要編譯，編譯過程可能發(fā)生在
- 打包過程 （使用vue文件編寫）
- 運(yùn)行時（將字符串賦值template字段，掛載到一個元素上并以其 DOM 內(nèi)部的 HTML 作為模板)
對應(yīng)的兩種方式 runtime-only vs runtime-compiler
runtime-only（默認(rèn)）
- 打包時只包含運(yùn)行時，因此體積更少
- 將template在打包的時候，就已經(jīng)編譯為render函數(shù)，因此性能更好
runtime-compiler
- 打包時需要包含（運(yùn)行時 + 編譯器），因此體積更大，大概多10Kb
- 在運(yùn)行的時候才把template編譯為render函數(shù)，因此性能更差
啟用runtime-compiler兩種方式
- main.js啟用
Vue.config.runtimeCompiler = true
- vue.config.js（若沒有手動創(chuàng)建一個）
module.exports = {
runtimeCompiler: true //默認(rèn)false
}
組件定義
1. 字符串形式定義（不推薦）
例子
const CustomButton = {
template: "<button>自定義按鈕</button>"
};
這種形式需要啟用運(yùn)行時編譯（runtime-compiler）
2. 單文件組件（推薦）
創(chuàng)建.vue后綴的文件，定義如下
<template>
<div>
<button>自定義按鈕</button>
</div>
</template>
<template> 里只能有一個根節(jié)點(diǎn)，即第一層只能有一個節(jié)點(diǎn)，不能多個節(jié)點(diǎn)平級
這種形式在打包的時就編譯成render函數(shù)，因此跟推薦這種方式定義組件
組件注冊
- 全局注冊
全局注冊是通過Vue.component()注冊
import CustomButton from './components/ComponentDemo.vue'
Vue.component('CustomButton', CustomButton)
優(yōu)點(diǎn)
- 其他地方可以直接使用
- 不再需要components指定組件
缺點(diǎn)
- 全局注冊的組件會全部一起打包，增加app.js體積
適合
- 基礎(chǔ)組件全局注冊
- 局部注冊
在需要的地方導(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>
每個組件都會創(chuàng)建一個新實例，組件的data必須是function，因此每個實例維護(hù)自己的data數(shù)據(jù)
組件傳參
- 通過props屬性
<template>
<button> {{buttonText}} </button>
</template>
<script>
export default {
props: {
buttonText: String
}
};
</script>
<customButton buttonText="Button 1"></customButton>
<customButton buttonText="Button 2"></customButton>
<customButton buttonText="Button 3"></customButton>
運(yùn)行效果
- 通過插槽<slot></slot>
<template>
<button style="margin:10px"><slot>Defalt Button</slot></button>
</template>
<script>
export default {
props: {
buttonText: String
}
};
</script>
<customButton></customButton>
<customButton><span style="color:blue">Button 2</span></customButton>
<customButton>Button 3</customButton>
運(yùn)行效果
看到是用自定義組件的innerHtml替換插槽，若插槽只有一個，可以不寫name attribute，若多個插槽需指定插槽name attribute
自定義事件
- 在組件內(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>
- 調(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>
運(yùn)行效果
