vue.js學習筆記 - 組件（二）

Betta 發布于2019-08-19 17:57 / 2751人閱讀

摘要：當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的，確保其他人正確地使用組件。有特性的稱為命名。例如，假定我們有一個組件，它的模板為父組件模板渲染結果為

一、注冊

// 定義
var MyComponent = Vue.extend({
  template: "A custom component!"
});

// 注冊
Vue.component("my-component", MyComponent);

// 創建根實例
new Vue({
  el: "#example"
});

或者直接寫成：

Vue.component("my-component", {
     template: "A custom component!"
});

 // 創建根實例
new Vue({
    el: "#example"
});

二、使用prop 傳遞數據 實例一：

Vue.component("child", {
  // 聲明 props
  props: ["msg"],
  // prop 可以用在模板內
  // 可以用 `this.msg` 設置
  template: "{{ msg }}"
});

實例二：

     Vue.component("child", {
      // camelCase in JavaScript
      props: ["myMessage"],
      template: "{{ myMessage }}"
    });

三、動態props

使用 v-bind 的縮寫語法通常更簡單：

四、Prop 綁定類型

prop 默認是單向綁定：當父組件的屬性變化時，將傳導給子組件，但是反過來不會。這是為了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強制雙向或單次綁定：

比較語法：

其他實例：


    custom header

五、Prop 驗證

組件可以為 props 指定驗證要求。當組件給其他人使用時這很有用，因為這些驗證要求構成了組件的 API，確保其他人正確地使用組件。此時 props 的值是一個對象，包含驗證要求：

Vue.component("example", {
  props: {
    // 基礎類型檢測 （`null` 意思是任何類型都可以）
    propA: Number,
    // 必需且是字符串
    propB: {
      type: String,
      required: true
    },
    // 數字，有默認值
    propC: {
      type: Number,
      default: 100
    },
    // 對象/數組的默認值應當由一個函數返回
    propD: {
      type: Object,
      default: function () {
        return { msg: "hello" }
      }
    },
    // 指定這個 prop 為雙向綁定
    // 如果綁定類型不對將拋出一條警告
    propE: {
      twoWay: true
    },
    // 自定義驗證函數
    propF: {
      validator: function (value) {
        return value > 10
      }
    },
    // 轉換函數（1.0.12 新增）
    // 在設置值之前轉換值
    propG: {
      coerce: function (val) {
        return val + "" // 將值轉換為字符串
      }
    },
    propH: {
      coerce: function (val) {
        return JSON.parse(val) // 將 JSON 字符串轉換為對象
      }
    }
  }
});

其他實例：

Vue.component("modal", {
  template: "#modal-template",
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true    
    }
  }
});

六、使用slot分發內容

元素作為組件模板之中的內容分發插槽。這個元素自身將被替換。
有 name 特性的 slot 稱為命名 slot。有 slot 特性的內容將分發到名字相匹配的命名 slot。

例如，假定我們有一個 multi-insertion 組件，它的模板為：

父組件模板：


  One
  Two
  Default A

渲染結果為：


  One
  Default A
  Two

GPU云服務器云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79021.html

Vue.js學習系列二 —— vuex學習實踐筆記（附DEMO）

摘要：有興趣的同學可以查看之前發布的文章學習系列一學習實踐筆記附學習系列二學習實踐筆記附學習系列三和網絡傳輸相關知識的學習實踐學習系列四打包工具的使用學習系列五從來聊聊學習系列項目地址項目暫時有點亂，之后會進行整理優化。上次學習了vue-router的使用，讓我能夠在各個頁面間切換，將頁面搭建了起來。這次則要學習vue的狀態管理模式——vuex。它類似于redux來應用的全局狀態。注：本...

DobbyKim 2019-08-21 15:52 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

zsirfs 2019-08-01 17:51 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

klivitamJ 2019-08-30 13:48 評論0 收藏0
vue學習筆記（二）

摘要：供用戶在相應的階段對其進行操作。我們像下面這樣使用這個指令大多數情況下，我們只需要使用與鉤子函數。里提供了函數的簡寫形式鉤子函數有兩個常用的參數和。其他用法與全局自定義指令一致。一、vue生命周期 vue實例從創建到銷毀的過程，稱為生命周期，共有八個階段。這八個階段里分別有一個叫做鉤子函數的實例選項。供用戶在相應的階段對其進行操作。 beforeCreate(){ //組件實例剛...

Pines_Cheng 2019-08-21 17:08 評論0 收藏0