Vue元件化開發

2021-10-02 06:36:50 字數 1457 閱讀 7575

前言

1、全域性元件註冊語法

vue.comonent(元件名稱,

)

2、元件的用法

3、元件註冊注意事項

4、元件的命名方式

vue.component('my-component',

)

vue.component('mycomponent',

)

5、區域性元件註冊

var componenta =

var componentb =

var componentc =

new vue(

})

6、元件之間的資料互動

(1)父元件向子元件傳值

vue.compoent('menu-item',}'

})

(2)父元件通過屬性將值傳給子元件

"來自父元件的資料">

:title="title">

(3)props屬性命名規則

vue.component('menu-item',}'

})"nihao">

(4)props屬性值型別

7、子元件向父元件傳值

:click='$emit("enlarge-text")'>擴大字型

v-on

:enlarge-text='fontsize +=0.1'>

8、非子元件之間的傳值

9、元件插槽的作用

父元件向子元件傳遞內容

元件插槽的基本用法

vue.compoment('alert-box',

)

"container">

"header">

"footer">

主要內容1

主要內容2

"footer">底部內容

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...

Vue元件化開發

1.建立元件構造器 2.註冊元件 3.使用元件 cpn div 1.建立元件構造器物件 const cpnc vue.extend 2.註冊元件 標籤名,元件構造器 vue.component cpn cpnc newvue script 各步驟的含義 1.vue.extend 2.vue.comp...

VUE元件化開發

vue.component 元件名稱,1 建立元件構造器 const cpnc vue.extend 2 註冊元件 全域性元件 vue.component my cpn cpnc 3 使用元件 區域性元件 components 註冊的語法糖 1.註冊全域性元件 vue.component cpn1 ...