vue 基礎(chǔ)知識(shí)積累

vue 基礎(chǔ)知識(shí)積累

一、全局API

Vue.extend():基礎(chǔ)的vue構(gòu)造器，創(chuàng)造一個(gè) vue對象子類，參數(shù)是一個(gè)包含組件選項(xiàng)的對象。（template, vue屬性， style）

注意：

僅有的例外是像 el 這樣根實(shí)例特有的選項(xiàng)。

一個(gè)組件的 data 選項(xiàng)必須是一個(gè)函數(shù)，因此每個(gè)實(shí)例可以維護(hù)一份被返回對象的獨(dú)立的拷貝：

data: function () { return { count: 0 } }

why: 因?yàn)閷ο髸r(shí)引用類型 ，函數(shù)有自己獨(dú)立的作用域。 組件可能會(huì)被多個(gè)實(shí)例同時(shí)引用，這將會(huì)導(dǎo)致多個(gè)實(shí)例共享同一個(gè)對象。

Vue.component ()： 注冊一個(gè)vue組件 全局 （Key：組件名稱， vue構(gòu)造器對象）

// 定義組件： // 定義一個(gè)名為 button-counter 的新組件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: 'You clicked me {{ count }} times.' }) ---------------------------------- //使用組件：

--------------------------- //vue根實(shí)例中掛在自定義組件 new Vue({ el: '#components-demo' })

全局注冊的組件可以用在其被注冊之后的任何 (通過 new Vue) 新創(chuàng)建的 Vue 根實(shí)例，也包括其組件樹中的所有子組件的模板中。

全局注冊的行為必須在根 Vue 實(shí)例 (通過 new Vue) 創(chuàng)建之前發(fā)生

組件注冊

局部注冊：

vue全局注冊是存在不完美的 ，因?yàn)槿肿?，若是組件此時(shí)注冊了 ，但是一段時(shí)間后業(yè)務(wù)調(diào)整導(dǎo)致組件不再被使用，但是構(gòu)建時(shí)依舊會(huì)存在。造成了用戶下載JavaScript代碼增加。

解決辦法： 在一個(gè)js文件中定義組件， 然后然后在 components 選項(xiàng)中定義你想要使用的組件：

// js文件 var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } //組件引用： new Vue({ el: '#app', components: { 'component-a': ComponentA, 'component-b': ComponentB } }) //ES2015 模塊 寫法聲明 components: { ComponentA }, 這種寫法相當(dāng)于 ComponentA: ComponentA 即這個(gè)變量名同時(shí)是 用在模板中的自定義元素的名稱 包含了這個(gè)組件選項(xiàng)的變量名

編碼風(fēng)格建議： 組件集中放置 ，然后通過 Babel 和 webpack 的模塊系統(tǒng) 進(jìn)行引用

import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // 這個(gè)我不想寫 ，但加深一次印象吧， 模塊化，組件化確實(shí)風(fēng)格清晰，利于維護(hù) }

vue3使用了一個(gè)小技巧 ，是的全局注冊基礎(chǔ)組件，這個(gè)感覺vue2也可以實(shí)現(xiàn) ，不難

vue.emit (enventName, […args]) 觸發(fā)當(dāng)前實(shí)例上的事件，可以用作通信。附加參數(shù)都會(huì)傳給-回調(diào)。 子觸發(fā)事件 ，夫監(jiān)聽，并執(zhí)行。

可以通過$event訪問這個(gè)args的值，但我沒試過 ，感覺這樣不方便，一般都會(huì)通過事件處理函數(shù)來解決這個(gè)問題。

實(shí)現(xiàn)方式 通過v-on：綁定-

// 創(chuàng)造子組件，并定義 Vue.component('welcome-button', { template: ` Click me to be welcomed ` }) //父子組件

new Vue({ el: '#emit-example-simple', methods: { sayHi: function () { alert('Hi!') } } })

二. 組件間數(shù)據(jù)的傳遞

Prop向子組件傳遞數(shù)據(jù)（）

Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。