總結Vue關于組件化開發(fā)知識點

這篇文章主要總結Vue關于組件化開發(fā)知識點，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

創(chuàng)新互聯(lián)-專業(yè)網站定制、快速模板網站建設、高性價比黔西南州網站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式黔西南州網站制作公司更省心,省錢,快速模板網站建設找我們，業(yè)務覆蓋黔西南州地區(qū)。費用合理售后完善，十載實體公司更值得信賴。

全局組件注冊

Vue.component('first-component', {
 data: function () {
  return {
   count: 0
  }
 },
 template: '<button @click="count++">{{ count }}</button>'
})

data 必須是一個函數

組件模板內容必須是單個根元素

組件模板內容可以是模板字符串

全局組件可以嵌套全局組件

組件命名方式

Vue.component('first-component', {/* .... */})
// 普通標簽模板中不能使用駝峰, 只能在template中使用駝峰方式
Vue.component('firstComponent', {/* .... */})

局部組件注冊

局部注冊的組件只能在父組件中使用 ;

var vm = new Vue({
 components: {
  'hello-world': {
   data: function () {
    return {
     msg: 'hello world'
    }
   },
   template: '<div>{{ msg }}</div>'
  }
 }
})

props 傳遞數據原則 : 單向數據流

組件內部通過 props 接收傳遞過來的值

Vue.component('son-com', {
	props: ['msg', 'parentMsg']
  template: '<div>{{msg + "---" + parentMsg}}</div>'
})

父組件通過屬性將值傳遞給子組件

<son-com msg="父組件的值" :parent-msg="bind綁定的父組件的值"></son-com>

props 屬性名規(guī)則

  • 在props中使用駝峰形式, 模板中需要使用短橫線的形式 ; html 對大小寫的不敏感的
  • 字符串中沒有這個限制
     

props 傳遞類型

<div id="app">
 <son-com
  :str="pstr"
  :num="pnum" <!-- 注意如果不用 v-bind 則獲取不到準確的屬性值 -->
  :boolean="pboolean"
  :arr="parr"
  :obj="pobj"
 >
 </son-com>
</div>
Vue.component('son-com', {
 props: ['str', 'num', 'boolean', 'arr', 'obj'],
 template: `
  <div>
   <div>{{ str }}</div>
   <div>{{ num }}</div>
   <div>{{ boolean }}</div>
   <ul>
    <li :key="index" v-for="(item, index) in arr">{{ item }}</li>
   </ul>
   <div>
    <span>{{ obj.name }}</span>
    <span>{{ obj.age }}</span>
   </div>
  </div>
 `
})
var vm = new Vue({
 el: '#app',
 data: {
  pstr: 'hello Vue',
  pnum: 12,
  pboolean: true,
  parr: ['apple', 'banner', 'orange'],
  pobj: {name: 'zs', age: 22}
 }
})

子組件向父組件傳值

子組件通過自定義事件向父組件傳值 $emit()

Vue.component('son-com', {
 template: `
  <div>
   <button @click="$emit('parent')">點擊放大父組件字體</button>
   傳值從第二個參數開始
	 <button @click="$emit('parent', 10)">點擊放大父組件字體</button>
  </div>
 `
})

父組件監(jiān)聽子組件事件

<div id="app">
 <div>父組件</div>
 <son-com @parent="handle"></son-com>
 <!-- 接收值為固定 $event-->
 <son-com @parent="handle($event)"></son-com>
</div>
var vm = new Vue({
 el: '#app',
 data: {
  font: 10
 },
 methods: {
  handle: function (val) {
   this.font += 5
   this.font += val // 此時的val就是 子組件傳遞過來的值
  }
 },
})

非父子組件傳值

單獨的事件中心管理組件之間的通信

// 創(chuàng)建事件中心
var hub = new Vue()

// 在 mounted 中監(jiān)聽事件
hub.$on('eventName', fn)
hub.$off('eventName') // 銷毀事件

// 在 methods 中處理事件
hub.$emit('eventName', param)

組件插槽

<tmp-com>
 <!-- 只能匹配一個標簽 -->
 <p slot="header">程序錯誤</p>
 <div>我是沒有匹配的內容</div>
 <!-- 可以匹配多個標簽 -->
 <template slot="footer">
  <p>匹配頁腳一次</p>
  <p>匹配頁腳兩次</p>
 </template>
</tmp-com>
Vue.component('tmp-com', {
 template: `
  <div>
   <header>
    <slot name="header"></slot>
   </header>
   <div>
    如果上面沒有匹配到對應的標簽就會展示默認內容
    <slot></slot>
   </div>
   <footer>
    <slot name="footer"></slot>
   </footer>
  </div>
 `
})

看完上述內容，是不是對總結Vue關于組件化開發(fā)知識點有進一步的了解，如果還想學習更多內容，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

本文名稱：總結Vue關于組件化開發(fā)知識點
分享地址：http://muchs.cn/article32/pjjspc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、定制開發(fā)、搜索引擎優(yōu)化、商城網站、建站公司、App開發(fā)

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

h5響應式網站建設