目標：
能夠知道元件化開發思想
能夠知道元件的註冊方式
能夠說出元件間的資料互動方式
能夠說出元件插槽的用法
能夠說出vue調式工具的用法
能夠基於元件的方式實現業務功能
目錄：
元件化開發思想
元件註冊
vue除錯工具用法
元件間資料互動
元件插槽
基於元件的案例
1、元件化開發思想
把不同的功能封裝到不同的元件中，元件可以通過組合的方式形成完整意義上的應用。
2、元件註冊
2.1、全域性元件註冊語法
vue.component(元件名稱,)
定義乙個名為button-counter的新元件
vue.component('button-counter',
},template:'點選了}次'})
2.2、元件用法
<div
id>
<
button-counter
>
button-counter
>
div>
//可以多次使用，每個元件之間互不影響
<
div
id>
<
button-counter
>
button-counter
>
<
button-counter
>
button-counter
>
<
button-counter
>
button-counter
>
div>
2.3、元件註冊注意事項
data必須是乙個函式
元件模板內容必須是單個根元素
元件模板內容可以是模板字串
元件命名方式：
短橫線方法
vue.component('my-component',)
駝峰方式
vue.component('mycomponent',)
注意：如果使用駝峰式命名元件，那麼在使用元件的時候，只能在字串模板中用駝峰的方式使用元件，但是在普通的標籤模板中，
必須使用短橫線的方式使用元件。
2.4、區域性元件註冊
var componenta =var componentb =
var componentc =
newvue(
})
3、vue除錯工具用法（devtools）
轉殖倉庫
安裝依賴包
構建開啟chrome擴充套件頁面
選中開發者模式
載入已解壓的擴充套件，選擇shells/chrome
4、元件間資料互動
4.1、父元件向子元件傳值
元件內部通過props接受傳遞過來的值
vue.component('menu-item',}
'})
父元件通過屬性將值傳遞給子元件
//靜態值<
menu-item
title
="來自父元件資料"
>
menu-item
>
//動態值
<
menu-item
：title
="title"
>
menu-item
>
props屬性名規則
在props中使用駝峰形式，模板中需要使用短橫線的形式
字串模板中沒有這個限制
如下所示：
vue.component('menu-item',}
div>'})
-在html中是短橫線方式的--
>
<
menu-item
menu-title
="nihao"
>
menu-item
>
props屬性值型別
字串string
數值number
布林值boolean
陣列array
物件object
4.2、子元件向父元件傳值
子元件通過自定義事件向父元件傳遞資訊
<button
v-on:click
='$emit("enlarge-text")'
>擴大字型
button
>
父元件監聽子元件事件
<menu-item
v-on:enlarge-text
='fontsize
+= 0.1'
><
menu-item
>
子元件通過自定義事件向父元件傳遞資訊
<button
v-on:click
='$emit("enlarge-text",0.1)'
>擴大字型
button
>
父元件監聽子元件事件
<menu-item
v-on:enlarge-text
='fontsize
+= $event'
>
menu-item
>
4.3、非父子元件間傳值
單獨的事件中心管理元件間的通訊
var eventhub = new vue()
監聽事件與銷毀事件
eventhub.$on('add-todo',addtodo)
eventhub.$off('add-todo')
事件觸發
eventhub.$emit('add-todo',id)
5、元件插槽
5.1、元件插槽的作用
父元件向子元件傳遞內容
5.2、元件插槽的基本用法
插槽位置
vue.component('alert-box',)
插槽內容
<alert-box
alert-box
>
5.3、具名插槽用法
插槽定義（元件插槽名為base-layout）
<div>
<
header
>
<
slot
name
="header"
>
slot
>
header
>
<
main
>
<
slot
>
slot
>
main
>
<
footer
>
<
slot
name
="footer"
>
slot
>
footer
>
div>
插槽用法
<base-layout
>
<
h1 slot
="header"
>標題內容
h1>
<
p>主要內容1
p>
<
p>主要內容1
p>
<
p slot
="footer"
>底部內容
p>
base-layout
>
5.4、作用域插槽
應用場景：父元件對子元件的內容進行加工處理
插槽定義（插槽名稱為：fruit-list）：
<ul>
<
li v-for
="item in list"
v-bind:key
= "item.id"
>
<
slot
v-bind:item
= "item"
>
}
slot
>
li>
ul>
插槽用法：
<fruit-list
v-bind:list
= "list"
>
<
template
slot-scope
= "slotprops"
>
<
strong
v-if
= "slotprops.item.current"
>
}
strong
>
template
>
fruit-list
>
vue 元件化開發基礎
建立元件構造器物件 註冊元件 使用元件 doctype html html lang en head meta charset utf 8 title document title script src js vue.js script head div id my cpn div body scr...
Vue基礎 七 Vue元件化開發
元件 component 是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的 vue.component 元件名稱 第1個引數是標籤名稱，第2個引數是乙個選項物件 全域性元件註冊後，任何vue例項都可以用 執行效果 可以看到元件可以重複使用。元件引數的data值必須是函式同時...
Vue元件化開發
1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...