(1).局部組件的使用

? 渲染組件-父使用子組件

• 1: 創(chuàng)建子組件(對象)
  • var Header = { template:'模板' , data是一個函數(shù),methods:功能,components:子組件們 }
• 2: 在父組件中聲明,根屬性components:{ 組件名:組件對象 }
• 3: 在父組件要用的地方使用 <組件名></組件名>
  • 在不同框架中,有的不支持大寫字母，用的時候
    • 組件名 MyHeader
    • 使用 my-header
• 總結(jié): 有父，聲子，掛子，用子

(2).注冊全局組件

• 應(yīng)用場景: 多出使用的公共性功能組件，就可以注冊成全局組件,減少冗余代碼
• 全局API Vue.component('組件名',組件對象);

(3).組件深入

---

父子組件傳值(父傳子)

• 1:父用子的時候通過屬性Prop傳遞
• 2:子要聲明props:[‘屬性名’] 來接收
• 3:收到就是自己的了，隨便你用
  • 在template中 直接用
  • 在js中 this.屬性名 用
• 總結(jié):父傳,子聲明,就是子的了
• 小補充: 常量傳遞直接用，變量傳遞加冒號

總結(jié)父傳子

• 父用子 先聲子,掛子,用子
• 父傳子 父傳子(屬性),子聲明(收),子直接用(就是自己的一樣)

子傳父

• 1.子要綁定原生事件，在原生事件函數(shù)中通過this.$emit(‘自定義的事件名’,arg1);觸發(fā)父組件中子組件自定義的事件名
• 2.父組件中的子組件v-bind:自定義事件的名字 = 'fn'綁定自定義的事件
• 3.父組件 就可以觸發(fā)fn的函數(shù) 數(shù)據(jù)就可以從子組件中傳過來了

總結(jié)

以上是生活随笔為你收集整理的vue从入门到精通之基础篇（二）组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。