(1).局部組件的使用
? 渲染組件-父使用子組件
- 1: 創建子組件(對象)
var Header = { template:'模板' , data是一個函數,methods:功能,components:子組件們 }
- 2: 在父組件中聲明,根屬性
components:{ 組件名:組件對象 }
- 3: 在父組件要用的地方使用
<組件名></組件名>
- 在不同框架中,有的不支持大寫字母,用的時候
- 組件名 MyHeader
- 使用 my-header
- 在不同框架中,有的不支持大寫字母,用的時候
- 總結: 有父,聲子,掛子,用子
(2).注冊全局組件
- 應用場景: 多出使用的公共性功能組件,就可以注冊成全局組件,減少冗余代碼
- 全局API
Vue.component('組件名',組件對象);
(3).組件深入
父子組件傳值(父傳子)
- 1:父用子的時候通過屬性Prop傳遞
- 2:子要聲明props:[‘屬性名’] 來接收
- 3:收到就是自己的了,隨便你用
- 在template中 直接用
- 在js中 this.屬性名 用
- 總結:父傳,子聲明,就是子的了
- 小補充: 常量傳遞直接用,變量傳遞加冒號
總結父傳子
- 父用子 先聲子,掛子,用子
- 父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)
子傳父
- 1.子要綁定原生事件,在原生事件函數中通過this.$emit(‘自定義的事件名’,arg1);觸發父組件中子組件自定義的事件名
- 2.父組件中的子組件
v-bind:自定義事件的名字 = 'fn'
綁定自定義的事件 - 3.父組件 就可以觸發fn的函數 數據就可以從子組件中傳過來了