Vue--元件基礎

東方來客發表於2019-03-28
Vue元件

本篇為根據Vue教程--元件基礎寫出完整的例子。

  1. 全域性註冊的元件

全域性註冊的元件在註冊之後可以用在任何新建立的 Vue 根例項 (new Vue) 的模板中。

// 命名可以採用駝峰或者中劃線，但是在使用元件時應使用中劃線形式。
Vue.component('addComponent',{...}
複製程式碼

  1. watch API

watch:{
// 在count資料發生改變時可以觀測到資料，進行一些處理
  ount: function(newVal, oldVal){
  console.log(`變化之前${oldVal}，變化之後${newVal}`)
}
複製程式碼

  1. props

  <div id="app">
    <add-component :num="count"  @add-one="add">哈哈</add-component>
  </div>
複製程式碼
props:{
    // 採用了物件的寫法
    num:{
      type: Number, // 接受Number型別
      required: true, // 引數是否必須
      default: 1, // 未傳值時生效的預設值
      validator: (value)=>{ // 可以對資料進行檢測，要返回true或者false
        // value 是傳過來num的值
        return value > 700 ? false : true
      }
    }
  },
複製程式碼

  1. 監聽子元件事件

  <div id="app">
    // 監聽add-one事件。 此處的哈哈會傳給元件中的slot進行顯示。
    <add-component :num="count"  @add-one="add">哈哈</add-component>
  </div>
複製程式碼
  // 使用``號可以換行code。
  template:`<div>
    <div>prop:{{num}}</div>
    <div>元件資料:{{componentNum}}</div>
    // 點選後觸發add-one事件，並傳值給該事件所觸發的父元件中的事件。
    <button @click="$emit('add-one',parseInt(addend,10))">給父元素加{{addend}}</button>
    <input placeholder="要加幾老鐵？" 
      v-model="addend"/>
    <div>插槽接受的內容：<slot></slot></div>
  </div>`
複製程式碼

相關文章