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='http://m.b3g6.com/bcjs/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組件的資料請關注好吧啦網其它相關文章！