Vue關於元件化開發知識點詳解

阿新 • • 發佈：2020-05-14

全域性元件註冊

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 屬性名規則

在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>
 `
})

父元件監聽子元件事件

<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就是 子元件傳遞過來的值
  }
 },})

非父子元件傳值

單獨的事件中心管理元件之間的通訊

// 建立事件中心
var hub = new Vue()

// 在 mounted 中監聽事件
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關於元件化開發知識點詳解的文章就介紹到這了,更多相關Vue 元件化開發內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！