亚洲精品在线观看卡一,女在线综合

什么是Vue組件

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴(kuò)展。

注冊

vue.component全局注冊

注冊或獲取全局組件。注冊還會自動(dòng)使用給定的id設(shè)置組件的名稱

// 注冊組件，傳入一個(gè)擴(kuò)展過的構(gòu)造器
Vue.component('my-component', Vue.extend({ /* ... */ }))
// 注冊組件，傳入一個(gè)選項(xiàng)對象（自動(dòng)調(diào)用 Vue.extend）
Vue.component('my-component', { /* ... */ })
// 獲取注冊的組件（始終返回構(gòu)造器）
var MyComponent = Vue.component('my-component')

全局注冊要確保在初始化根實(shí)例之前注冊了組件

<div id="example">
  <my-component></my-component>
</div>

// 注冊
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 創(chuàng)建根實(shí)例
new Vue({
  el: '#example'
})

components選項(xiàng)局部注冊

不必在全局注冊每個(gè)組件。通過使用組件實(shí)例選項(xiàng)注冊，可以使組件僅在另一個(gè)實(shí)例/組件的作用域中可用：

 const MyComponent = Vue.extend({
   template: '<div>A custom component!</div>'
 })

 new Vue({
    el: '#app',
    components: {
      'my-component': MyComponent
    },
    //注冊局部組件，傳入一個(gè)選項(xiàng)對象（自動(dòng)調(diào)用 Vue.extend）
    //components: { 'my-component': { template: '<div>A custom component!</div>' } }
    template: '<my-component></my-component>'
})

以is特性擴(kuò)展

當(dāng)使用 DOM 作為模版時(shí) (例如，將 el 選項(xiàng)掛載到一個(gè)已存在的元素上), 你會受到 HTML 的一些限制，因?yàn)?Vue 只有在瀏覽器解析和標(biāo)準(zhǔn)化 HTML 后才能獲取模版內(nèi)容。尤其像這些元素 <ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 這樣的元素只能出現(xiàn)在某些其它元素內(nèi)部。
在自定義組件中使用這些受限制的元素時(shí)會導(dǎo)致一些問題，例如：

<table>
  <my-row>...</my-row>
</table>

自定義組件 <my-row> 被認(rèn)為是無效的內(nèi)容，因此在渲染的時(shí)候會導(dǎo)致錯(cuò)誤。變通的方案是使用特殊的 is 屬性：

const MyComponent = Vue.extend({
  template: '<p>Hello World!</p>'
})

new Vue({
  el: '#app',
  components: {
    'my-row': MyComponent
  },
  template: `
      <table>
        <tr is="my-row"></tr>
      </table>
    `
})

data 選項(xiàng)

通過 Vue 構(gòu)造器傳入的各種選項(xiàng)大多數(shù)都可以在組件構(gòu)造器里用。但data 是一個(gè)例外，它必須是函數(shù)。
實(shí)際上，如果你這么做：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

那么 Vue 會停止，并在控制臺發(fā)出警告，告訴你在組件中 data 必須是一個(gè)函數(shù)。理解這種規(guī)則的存在意義很有幫助，讓我們假設(shè)用如下方式來繞開 Vue 的警告：

<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>
var data = { counter: 0 }
Vue.component('simple-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  // 技術(shù)上 data 的確是一個(gè)函數(shù)了，因此 Vue 不會警告，
  // 但是我們返回給每個(gè)組件的實(shí)例的卻引用了同一個(gè)data對象
  data: function () {
    return data
  }
})
new Vue({
  el: '#example-2'
})

由于data是一個(gè)對象，三個(gè)組件都保持同一個(gè)data的引用。我們可以通過函數(shù)為每個(gè)組件返回全新的 data 對象來解決這個(gè)問題。

data: function () {
  return {
    counter: 0
  }
}

父子組件通信

在 Vue 中，父子組件的關(guān)系可以總結(jié)為 props down, events up。父組件通過 props 向下傳遞數(shù)據(jù)給子組件，子組件通過 events 給父組件發(fā)送消息。

props-events.png

prop

組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，我們需要通過子組件的 props 選項(xiàng)，暴露對外的接口。

Vue.component('child', {
  // 聲明 props
  props: ['message'],
  // 就像 data 一樣，prop 可以用在模板內(nèi)
  // 同樣也可以在 vm 實(shí)例中像“this.message”這樣使用
  template: '<span>{{ message }}</span>'
})

camelCase vs kebab-case

HTML 特性是不區(qū)分大小寫的。所以，當(dāng)使用的不是字符串模版，camelCased (駝峰式) 命名的 prop 需要轉(zhuǎn)換為相對應(yīng)的 kebab-case (短橫線隔開式) 命名：

Vue.component('child', {
  // camelCase in JavaScript
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>
```

#### 動(dòng)態(tài)prop
在模板中，要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會傳導(dǎo)給子組件：
```
<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

字面量語法 vs 動(dòng)態(tài)語法

初學(xué)者常犯的一個(gè)錯(cuò)誤是使用字面量語法傳遞數(shù)值：

<!-- 傳遞了一個(gè)字符串 "1" -->
<comp some-prop="1"></comp>

因?yàn)樗且粋€(gè)字面 prop，它的值是字符串 "1"
而不是 number。如果想傳遞一個(gè)實(shí)際的 number，需要使用 v-bind
，從而讓它的值被當(dāng)作 JavaScript 表達(dá)式計(jì)算：

<!-- 傳遞實(shí)際的 number -->
<comp v-bind:some-prop="1"></comp>

單向數(shù)據(jù)流

prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會反過來。這是為了防止子組件無意修改了父組件的狀態(tài)——這會讓應(yīng)用的數(shù)據(jù)流難以理解。

注意在 JavaScript 中對象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(tài)。

我們應(yīng)該制止這種情況發(fā)生：

定義一個(gè)局部變量，并用 prop 的值初始化它：

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

定義一個(gè)計(jì)算屬性，處理 prop 的值并返回。

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

prop驗(yàn)證

為組件的 props 指定驗(yàn)證規(guī)格。如果傳入的數(shù)據(jù)不符合規(guī)格，Vue 會發(fā)出警告。
要指定驗(yàn)證規(guī)格，需要用對象的形式，而不能用字符串?dāng)?shù)組：

Vue.component('example', {
  props: {
    // 基礎(chǔ)類型檢測 (`null` 意思是任何類型都可以)
    propA: Number,
    // 多種類型
    propB: [String, Number],
    // 必傳且是字符串
    propC: {
      type: String,
      required: true
    },
    // 數(shù)字，有默認(rèn)值
    propD: {
      type: Number,
      default: 100
    },
    // 數(shù)組/對象的默認(rèn)值應(yīng)當(dāng)由一個(gè)工廠函數(shù)返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生構(gòu)造器：

String
Number
Boolean
Function
Object
Array
Symbol

type 也可以是一個(gè)自定義構(gòu)造器函數(shù)，使用 instanceof 檢測。

非prop

所謂非 prop 屬性，就是它可以直接傳入組件，而不需要定義相應(yīng)的 prop。
明確給組件定義 prop 是傳參的推薦方式，但組件的作者并不總能預(yù)見到組件被使用的場景。所以，組件可以接收任意傳入的屬性，這些屬性都會被添加到組件的根元素上。

自定義事件

每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口 (Events interface)，即：

使用 $on(eventName)監(jiān)聽事件
使用 $emit(eventName)觸發(fā)事件

使用 v-on 綁定事件

父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
不能用 $on 偵聽子組件拋出的事件，而必須在模板里直接用 v-on 綁定。

v-on 用在普通元素上時(shí)，只能監(jiān)聽原生 DOM 事件。用在自定義元素組件上時(shí)，也可以監(jiān)聽子組件觸發(fā)的自定義事件。

給組件綁定原生事件

有時(shí)候，你可能想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件?？梢允褂?.native 修飾 v-on。例如：

<my-component v-on:click.native="doTheThing"></my-component>

v-on 監(jiān)聽組件上自定義事件，并不會綁定到其根元素

.sync修飾符（在父子組件數(shù)據(jù)模型之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定）

.sync 修飾符，只是作為一個(gè)編譯時(shí)的語法糖存在。它會被擴(kuò)展為一個(gè)自動(dòng)更新父組件屬性的 v-on 偵聽器。
如下代碼

<comp :foo.sync="bar"></comp>

會被擴(kuò)展為：

<comp :foo="bar" @update:foo="val => bar = val"></comp>

當(dāng)子組件需要更新 foo 的值時(shí)，它需要顯式地觸發(fā)一個(gè)更新事件：

this.$emit('update:foo', newValue)

例如：

  const MyComponent = Vue.extend({
  template: `
    <div>
      <button @click="onClick">點(diǎn)擊計(jì)數(shù)</button><p>{{count}}</p>
    </div>
  `,
  props: ['count'],
  data: function (params) {
    return {
      counter: this.count
    }
  },
  methods: {
    onClick: function () {
      this.counter += 1;
      //emit count更新事件
      this.$emit('update:count', this.counter);
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-component': MyComponent
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 雙向綁定count -->
         <my-component :count.sync="total"></my-component>
      </div>
    `,
  data: {
    total: 0
  }
})

使用 v-model 綁定自定義表單組件

默認(rèn)情況下，v-model 會綁定組件的 value 屬性和監(jiān)聽 input 事件。
所以要讓自定義組件的 v-model 生效，它應(yīng)該 (在 2.2.0+ 這是可配置的)：

接受一個(gè) value 屬性
在有新的值時(shí)觸發(fā) input 事件

自定義計(jì)數(shù)器組件例子：

const MyCounter = Vue.extend({
  template: `<div>
     <button @click="decreace">-</button>{{count}}<button @click="increace">+</button>
  </div>`,
  props: ['value'],
  data: function () {
    return {
      count: this.value
    }
  },
  methods: {
    decreace: function () {
      this.count -= 1;
      this.$emit('input', this.count)
    },
    increace: function () {
      this.count += 1;
      this.$emit('input', this.count)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-counter': MyCounter
  },
  template: `
      <div>
         <p>{{total}}</p>
         <!-- 雙向綁定count -->
         <my-counter v-model="total"></my-counter>
      </div>
    `,
  data: {
    total: 0
  }
})

但是諸如單選框、復(fù)選框之類的輸入類型可能把 value 屬性用作了別的目的。model 選項(xiàng)來重新包裝v-model默認(rèn)綁定接口，可以就回避這樣的沖突：

const SelectComp = Vue.extend({
  template: `
  <select @change="onSelect" v-model="selected">
    <option disabled value='0'>請選擇</option>
    <option value="1">選擇1</option>
    <option value="2">選擇2</option>
    <option value="3">選擇3</option>
  </select>
  `,
  data: function () {
    return {
      selected: ''
    }
  },
  //重新包裝v-model綁定接口
  model: {
    prop: 'selected',
    event: 'select'
  },
  methods: {
    onSelect: function () {
      this.$emit('select', this.selected)
    }
  }
})

new Vue({
  el: '#app',
  components: {
    'my-select': SelectComp
  },
  template: `
      <div>
         <p>{{selected}}</p>
         <my-select v-model="selected"></my-select>
      </div>
    `,
  data: {
    selected: ''
  }
})

非父子組件通信

在簡單的場景下，可以使用一個(gè)空的 Vue 實(shí)例作為中央事件總線：

var bus = new Vue()

// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)

// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
  // ...
})

使用Slot分發(fā)內(nèi)容

為了提高組件的可擴(kuò)展性和組合組件，我們可以利用Vue提供Slot分發(fā)內(nèi)容來實(shí)現(xiàn)。
所謂的Slot內(nèi)容分發(fā)就是把自定義元素內(nèi)嵌的模板插入到子組件模板slot插座中。

image.png

實(shí)例代碼:

const MyChild = Vue.extend({
  template: `<h1>
    <!-- 默認(rèn)插座，插入內(nèi)容會替換掉slot，若沒父模板中沒有內(nèi)容插入，則該備用內(nèi)容會顯示 -->
    <slot>h1內(nèi)容</slot>
  </h1>`
})

new Vue({
  el: '#app',
  components: {
    'my-child': MyChild
  },
  template: `
  <div>
    <!-- 插入內(nèi)容 -->
    <my-child>
      Hello world!
    </my-child>
    <!-- 無內(nèi)容插入 -->
    <my-child></my-child>
  </div>
  `
})

效果:

image.png

注意分發(fā)內(nèi)容只在父作用域內(nèi)編譯（請看slot編譯內(nèi)容）

多個(gè)slot

當(dāng)父模板中有多個(gè)內(nèi)容要插入到子模板中不同位置時(shí)，我們可以：

在父模板中內(nèi)容根元素添加slot屬性，屬性值為slot別名
子模板中slot標(biāo)簽添加name屬性別名

子模板：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父模板：

<app-layout>
  <h1 slot="header">這里可能是一個(gè)頁面標(biāo)題</h1>
  <p>主要內(nèi)容的一個(gè)段落。</p>
  <p>另一個(gè)主要段落。</p>
  <p slot="footer">這里有一些聯(lián)系信息</p>
</app-layout>

渲染結(jié)果：

<div class="container">
  <header>
    <h1>這里可能是一個(gè)頁面標(biāo)題</h1>
  </header>
  <main>
    <p>主要內(nèi)容的一個(gè)段落。</p>
    <p>另一個(gè)主要段落。</p>
  </main>
  <footer>
    <p>這里有一些聯(lián)系信息</p>
  </footer>
</div>

作用域插槽

作用域插槽，我的理解其實(shí)就是把子組件模板中的slot看作一個(gè)“組件”，所以子組件能夠向slot傳遞數(shù)據(jù)，就像向組件綁定數(shù)據(jù)一樣。而該slot“組件”的模板聲明在父級中，是具有特殊屬性 scope 的 <template> 元素，表示它是作用域插槽的模板。scope 的值對應(yīng)一個(gè)臨時(shí)變量名，此變量接收從子組件中傳遞的 props 對象：

<div class="parent">
  <child>
    <template scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像你將 props 傳遞給組件一樣：

<div class="child">
  <slot text="hello from child"></slot>
</div>

渲染以上結(jié)果，得到的輸出會是：

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

其他

動(dòng)態(tài)組件

通過 Vue 內(nèi)置組件 <component> ，動(dòng)態(tài)地綁定到它的 is 屬性，依靠 is 值，來動(dòng)態(tài)切換組件：

var vm = new Vue({
  el: '#example',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

<component v-bind:is="currentView">
  <!-- 組件在 vm.currentview 變化時(shí)改變！ -->
</component>

keep-live 緩存組件避免重新渲染

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多個(gè)條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 <transition> 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

<keep-alive> 是用在其一個(gè)直屬的子組件被開關(guān)的情形。如果你在其中有 v-if 則不會工作。如果有上述的多個(gè)條件性的子元素，<keep-alive> 要求同時(shí)只有一個(gè)子元素被渲染。

子組件引用

使用 ref 為子組件指定一個(gè)索引 ID。這樣就可以是用父實(shí)例屬性refs訪問子組。

父模板:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile

X-Template

另一種定義模版的方式是在 JavaScript 標(biāo)簽里使用 text/x-template 類型，并且指定一個(gè) id。例如：

<script type="text/x-template" id="hello-world-template">
  <p>Hello hello hello</p>
</script>

Vue.component('hello-world', {
  template: '#hello-world-template'
})

這在有很多模版或者小的應(yīng)用中有用，否則應(yīng)該避免使用，因?yàn)樗鼘⒛０婧徒M件的其他定義隔離了。

對低開銷的靜態(tài)組件使用 v-once

盡管在 Vue 中渲染 HTML 很快，不過當(dāng)組件中包含大量靜態(tài)內(nèi)容時(shí)，可以考慮使用 v-once
將渲染結(jié)果緩存起來，就像這樣：

Vue.component('terms-of-service', {
template: '\
<div v-once>\
<h1>Terms of Service</h1>\
... a lot of static content ...\
</div>\
'
})

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue 組件

Vue 組件

什么是Vue組件

注冊

vue.component全局注冊

components選項(xiàng)局部注冊

以is特性擴(kuò)展

data 選項(xiàng)

父子組件通信

prop

camelCase vs kebab-case

字面量語法 vs 動(dòng)態(tài)語法

單向數(shù)據(jù)流

prop驗(yàn)證

非prop

自定義事件

使用 v-on 綁定事件

給組件綁定原生事件

.sync修飾符（在父子組件數(shù)據(jù)模型之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定）

使用 v-model 綁定自定義表單組件

非父子組件通信

使用Slot分發(fā)內(nèi)容

多個(gè)slot

作用域插槽

其他

動(dòng)態(tài)組件

keep-live 緩存組件避免重新渲染

子組件引用

X-Template

對低開銷的靜態(tài)組件使用 v-once

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Vue 組件

什么是Vue組件

注冊

vue.component全局注冊

components選項(xiàng)局部注冊

以is特性擴(kuò)展

data 選項(xiàng)

父子組件通信

prop

camelCase vs kebab-case

字面量語法 vs 動(dòng)態(tài)語法

單向數(shù)據(jù)流

prop驗(yàn)證

非prop

自定義事件

使用 v-on 綁定事件

給組件綁定原生事件

.sync修飾符（在父子組件數(shù)據(jù)模型之間實(shí)現(xiàn)雙向數(shù)據(jù)綁定）

使用 v-model 綁定自定義表單組件

非父子組件通信

使用Slot分發(fā)內(nèi)容

多個(gè)slot

作用域插槽

其他

動(dòng)態(tài)組件

keep-live 緩存組件避免重新渲染

子組件引用

X-Template

對低開銷的靜態(tài)組件使用 v-once

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av