Vue 元件化（二）

元件使用分為三個步驟：
1.建立元件構造器物件（呼叫vue.
extend
()方法建立元件構造器）
2.註冊元件（呼叫vue.
component
()方法註冊元件）
3.使用元件（在vue例項的作用範圍內使用元件）
使用例項：
1.建立
const mycomponent = vue.
extend()
;2.註冊(全域性元件)
vue.
component
('my-cpn'
,mycomponent )
;3.使用
在vue例項管理的html**中使用
<
/my-cpn>即可。

cpn就是component的縮寫

注意``是es6中的語法,類似於引號』和雙引號",但功能更強大,換行時可以不用使用+連線。

//註冊區域性元件
newvue(,
components:})
;

//註冊父子元件
const childcpn= vue.
extend()
;const parentcpn = vue.
extend(}
);

註冊元件的語法糖：就是把vue.extend()方法所需的物件引數直接替換到原來的元件構造器物件cpn處。就省略了vue.extend()。但實際上原始碼中還是呼叫的vue.extend()。

//提取template模板
//第一種方法
"text/x-template" id=
"cpn"
>
some html contents.
<
/script>
vue.
component()
<
/script>
//第二種寫法
"cpn2"
>
some html contents.
<
/template>
vue.
component()
<
/script>

vue例項可以看成是根元件，root元件。

註冊元件寫法的演變過程

1.最原始的3步註冊元件。

2.省略vue.extend()。

3.提取template模板。

元件的data必須是函式。

原因：因為函式每次返回的data資料是新物件，元件多次復用時，相互之間資料是沒有影響的。

子元件不能直接訪問父元件或者vue例項中的資料。這就涉及到了資料的傳遞。

父子元件的通訊方式：（注意駝峰命名）

1.通過props從父元件向子元件傳遞資料

問題報錯：vue expected boolean, got string with value 「false」

解決：這種情況是有一些屬性的值應該填寫boolean型別，但是當前的值可能是「」字串。這種情況只需要在屬性前面加上：即可。

2.通過事件從子元件向父元件傳送訊息

在子元件中發射自定義事件『item-click』

this.$emit('item-click',要傳遞的物件)

3.兄弟元件間通訊

兄弟元件之間的通訊是通過父元件作為中間媒介來進行通訊的。

元件的template模板下有很多標籤時，要用
標籤包起來。

watch()

this .$children //獲取的為全部的子元件，陣列型別 this .$refs //獲取的為所有包含ref屬性的子元件，物件型別 this .$parent //上一級元件，物件型別 this

.$root //根元件，物件型別

slot插槽：元件的插槽是為了讓封裝的元件功能更強大，更加具有擴充套件性。可以分為匿名插槽，具名插槽，作用域插槽。可以有預設值具名插槽，可以替換指定插槽 } v-slot的出現是為了代替原有的slot和slot-scope，簡化了一些複雜的語法，可以縮寫為#

一句話概括就是v-slot ：後邊是插槽名稱，=後邊是元件內部繫結作用域值的對映。

"viewport" content=
"width=device-width, initial-scale=1.0"
>

Vue 元件化（二）

vue元件與元件化

Vue的元件化

Vue元件化之構造元件

Vue 元件化（二）

vue元件與元件化

Vue的元件化

Vue元件化之構造元件

相關推薦