Vue Vue元件簡單使用

2021-09-12 08:56:01 字數 606 閱讀 3557

現在的有些web應用都非常龐大,web開發也越來越元件化、模組化,我們需要在使用vue的時候去寫一些元件,避免重複造輪子,提高元件的復用和開發效率。

乙個元件就好像一塊積木,多個元件的層層堆疊、擺放最終形成乙個完整的系統。元件的好處在於降低了各個模組之間的耦合性,以至於我們在維護專案時不會太心累。高度耦合的專案必然會帶來維護時間上的浪費。在目前的前端開發中,元件化髮開是必須要掌握的技能,我們也需要學會如何去封裝乙個元件。

vue中元件分為全域性註冊和區域性註冊,全域性註冊的元件可以在每個vue例項中使用。

全域性註冊

vue.component('my-component-name', )

//在模板裡使用

區域性註冊

var componenta =

var componentb =

var componentc =

//在需要的vue例項中使用元件

new vue(

})

注:元件命名還可以使用峰駝命名(如:mycompontent),個人喜歡短橫線命名(如:my-component),這跟我們在模板中使用的方式是一致的。

Vue Vue簡單介紹

前言 vue 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是,vue 被設計為可以自底向上逐層應用。vue 的核心庫只關注檢視層,不僅易於上手,還便於與第三方庫或既有專案整合。vue.js起步 每個 vue 應用都需要通過例項化 vue 來實現。語法格式如下 var vm newvue...

vue vue元件之間傳值

父元件向子元件傳值 在 vue 中,可以使用 props 向子元件傳遞資料。父元件部分 在呼叫元件的時候,使用 v bind 將 msg 的值繫結為父元件中定義的變數 parentmsg 子元件部分 在 props 中新增了元素之後,就不需要在 data 中再新增變數了。父元件中值發生變化子元件可以...

close事件 vue vue元件通訊總結

11月份的面試越來越覺得自己學的不夠踏實和深入。現在實習了有空總結下 京東前端實習一道面試題 vue中元件通訊介面有哪些,除了props和 emit?注意是介面,我說了vuex和localstorage,立馬就被否決了 props最常見的父子通訊介面,但是props是單向資料流的形式 父級 prop...