vue 例項與元件的關係

2021-09-16 21:28:40 字數 648 閱讀 8886

建立vue例項

var vm = new vue()
官方:乙個 vue 應用由乙個通過new vue建立的根 vue 例項,以及可選的巢狀的、可復用的元件樹組成。

建立元件

// 定義乙個名為 button-counter 的新元件

vue.component('button-counter',

},template: 'you clicked me } times.'

})

元件是可復用的 vue 例項,且帶有乙個名字:在這個例子中是。我們可以在乙個通過new vue建立的 vue 根例項中,把這個元件作為自定義元素來使用:

元件其實就是例項。

乙個vue專案是由乙個根例項和多個元件組成,元件其實就是例項。只不過是為了區分使用方式,所以才用了兩個叫法,即元件和例項

區分什麼使用方式呢?

一般說的例項就是根例項,乙個vue專案只能有乙個(new vue)

乙個vue專案能有多個元件,並且每個元件都可重複使用。

Vue元件通訊(關係元件和非關係元件)

元件是vue的乙個重要概念,有效的利用了封裝的思想 可以模擬js的函式或者類 我們通常會把乙個單頁應用中的各種模組拆分成乙個乙個單獨的元件,利用這些元件組裝成乙個完整的功能,具有很好的復用性和維護性。既然是封裝就涉及輸入和輸出,而多個元件之間如何處理輸入和輸出是我們經常會面臨到的問題,也是我們經常說...

vue元件基礎 元件通訊與例項建立

一 基礎定義 vue元件 多種方式建立的元件 私有化呼叫 元件化的第三種方式,外部引用!通訊 1.父元件,可以在引用子元件的時候,通過屬性繫結 v bind 的形式,把需要傳遞給子元件的資料,以屬性繫結的形式傳遞到子元件內部供子元件使用。但是先把父元件中的parentmsg 通過props 傳遞給子...

vue呼叫元件的屬性 Vue 元件例項屬性的使用

前言 因為最近面試了 二 三十個人,發現大部分都還是只是停留在 vue 文件的教程。有部分連教程這部分的文件也沒看全。所以稍微寫一點,讓新上手的 vuer 多了解 vue 文件的其他更需要關注的點。因為 vue 文件已經是個很成熟的文件,並且實現的 demo 簡潔明瞭,我就不具體寫實現 了,文內只會...