成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue.js學(xué)習(xí)筆記 - 組件（二）

Betta / 2813人閱讀

摘要：當(dāng)組件給其他人使用時(shí)這很有用，因?yàn)檫@些驗(yàn)證要求構(gòu)成了組件的，確保其他人正確地使用組件。有特性的稱為命名。例如，假定我們有一個(gè)組件，它的模板為父組件模板渲染結(jié)果為

一、注冊(cè) 
// 定義
var MyComponent = Vue.extend({
  template: "
A custom component!
"
});

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

// 創(chuàng)建根實(shí)例
new Vue({
  el: "#example"
});

或者直接寫成：

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

 // 創(chuàng)建根實(shí)例
new Vue({
    el: "#example"
});
二、使用prop 傳遞數(shù)據(jù) 實(shí)例一： 
Vue.component("child", {
  // 聲明 props
  props: ["msg"],
  // prop 可以用在模板內(nèi)
  // 可以用 `this.msg` 設(shè)置
  template: "{{ msg }}"
});
實(shí)例二： 
     Vue.component("child", {
      // camelCase in JavaScript
      props: ["myMessage"],
      template: "{{ myMessage }}"
    });
三、動(dòng)態(tài)props

使用 v-bind 的縮寫語法通常更簡(jiǎn)單：
四、Prop 綁定類型

prop 默認(rèn)是單向綁定：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過來不會(huì)。這是為了防止子組件無意修改了父組件的狀態(tài)——這會(huì)讓應(yīng)用的數(shù)據(jù)流難以理解。不過，也可以使用 .sync 或 .once 綁定修飾符顯式地強(qiáng)制雙向或單次綁定：

比較語法：

其他實(shí)例：


    
custom header
五、Prop 驗(yàn)證

組件可以為 props 指定驗(yàn)證要求。當(dāng)組件給其他人使用時(shí)這很有用，因?yàn)檫@些驗(yàn)證要求構(gòu)成了組件的 API，確保其他人正確地使用組件。此時(shí) props 的值是一個(gè)對(duì)象，包含驗(yàn)證要求：

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

其他實(shí)例：

Vue.component("modal", {
  template: "#modal-template",
  props: {
    show: {
      type: Boolean,
      required: true,
      twoWay: true    
    }
  }
});
六、使用slot分發(fā)內(nèi)容

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

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

父組件模板：


  
One

  
Two

  
Default A

渲染結(jié)果為：


  
One

  
Default A

  
Two

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/79021.html

相關(guān)文章

  • Vue.js學(xué)習(xí)系列二 —— vuex學(xué)習(xí)實(shí)踐筆記（附DEMO）

    摘要：有興趣的同學(xué)可以查看之前發(fā)布的文章學(xué)習(xí)系列一學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列二學(xué)習(xí)實(shí)踐筆記附學(xué)習(xí)系列三和網(wǎng)絡(luò)傳輸相關(guān)知識(shí)的學(xué)習(xí)實(shí)踐學(xué)習(xí)系列四打包工具的使用學(xué)習(xí)系列五從來聊聊學(xué)習(xí)系列項(xiàng)目地址項(xiàng)目暫時(shí)有點(diǎn)亂，之后會(huì)進(jìn)行整理優(yōu)化。 上次學(xué)習(xí)了vue-router的使用，讓我能夠在各個(gè)頁面間切換，將頁面搭建了起來。這次則要學(xué)習(xí)vue的狀態(tài)管理模式——vuex。它類似于redux來應(yīng)用的全局狀態(tài)。 注：本...

    DobbyKim 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（三）

    摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

    fsmStudy 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（三）

    摘要：直接創(chuàng)建組件使用標(biāo)簽名組件模板，根據(jù)組件構(gòu)造器來創(chuàng)建組件。相應(yīng)的，實(shí)例也被稱為父組件。而且不允許子組件直接修改父組件中的數(shù)據(jù)，強(qiáng)制修改會(huì)報(bào)錯(cuò)。 一、組件 （一）什么是組件 組件（Component）是 Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML元素，封裝可重用的代碼組件是自定義元素（對(duì)象）。 （二）創(chuàng)建組件的兩種方式 官方推薦組件標(biāo)簽名是使用-連接的組合詞，例如：。 1、使用...

    zsirfs 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（二）

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

    klivitamJ 評(píng)論0 收藏0

  • vue學(xué)習(xí)筆記（二）

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

    Pines_Cheng 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<