中文字幕一区二区人妻电影,亚洲av无码一区二区乱子伦as ,亚洲精品无码永久在线观看,亚洲成aⅴ人片久青草影院按摩,亚洲黑人巨大videos

上一篇：Vue.js 表單 下一篇：Vue.js 自定義指令

Vue.js 組件

組件（Component）是 Vue.js 最強(qiáng)大的功能之一。

組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。

組件系統(tǒng)讓我們可以用獨(dú)立可復(fù)用的小組件來(lái)構(gòu)建大型應(yīng)用，幾乎任意類型的應(yīng)用的界面都可以抽象為一個(gè)組件樹(shù)：

注冊(cè)一個(gè)全局組件語(yǔ)法格式如下：

Vue.component(tagName, options)

tagName 為組件名，options 為配置選項(xiàng)。注冊(cè)后，我們可以使用以下方式來(lái)調(diào)用組件：

<tagName></tagName>

全局組件

所有實(shí)例都能用全局組件。

全局組件實(shí)例

注冊(cè)一個(gè)簡(jiǎn)單的全局組件 json，并使用它：

<div id="app"> <json></json> </div> <script> // 注冊(cè) Vue.component('json', { template: '<h1>自定義組件!</h1>' }) // 創(chuàng)建根實(shí)例 new Vue({ el: '#app' }) </script>

運(yùn)行代碼 ?

局部組件

我們也可以在實(shí)例選項(xiàng)中注冊(cè)局部組件，這樣組件只能在這個(gè)實(shí)例中使用：

局部組件實(shí)例

注冊(cè)一個(gè)簡(jiǎn)單的局部組件 json，并使用它：

<div id="app"> <json></json> </div> <script> var Child = { template: '<h1>自定義組件!</h1>' } // 創(chuàng)建根實(shí)例 new Vue({ el: '#app', components: { // <json> 將只在父模板可用 'json': Child } }) </script>

運(yùn)行代碼 ?

Prop

prop 是子組件用來(lái)接受父組件傳遞過(guò)來(lái)的數(shù)據(jù)的一個(gè)自定義屬性。

父組件的數(shù)據(jù)需要通過(guò) props 把數(shù)據(jù)傳給子組件，子組件需要顯式地用 props 選項(xiàng)聲明 "prop"：

Prop 實(shí)例

<div id="app"> <child message="hello!"></child> </div> <script> // 注冊(cè) Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({ el: '#app' }) </script>

運(yùn)行代碼 ?

動(dòng)態(tài) Prop

類似于用 v-bind 綁定 HTML 特性到一個(gè)表達(dá)式，也可以用 v-bind 動(dòng)態(tài)綁定 props 的值到父組件的數(shù)據(jù)中。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳導(dǎo)給子組件：

Prop 實(shí)例

<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注冊(cè) Vue.component('child', { // 聲明 props props: ['message'], // 同樣也可以在 vm 實(shí)例中像 "this.message" 這樣使用 template: '<span>{{ message }}</span>' }) // 創(chuàng)建根實(shí)例 new Vue({ el: '#app', data: { parentMsg: '父組件內(nèi)容' } }) </script>

運(yùn)行代碼 ?

以下實(shí)例中使用 v-bind 指令將 todo 傳到每一個(gè)重復(fù)的組件中：

Prop 實(shí)例

<div id="app"> <ol> <todo-item v-for="item in sites" v-bind:todo="item"></todo-item> </ol> </div> <script> Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) new Vue({ el: '#app', data: { sites: [ { text: 'Runoob' }, { text: 'Google' }, { text: 'Taobao' } ] } }) </script>

運(yùn)行代碼 ?

注意: prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)。

Prop 驗(yàn)證

組件可以為 props 指定驗(yàn)證要求。

為了定制 prop 的驗(yàn)證方式，你可以為 props 中的值提供一個(gè)帶有驗(yàn)證需求的對(duì)象，而不是一個(gè)字符串?dāng)?shù)組。例如：

Vue.component('my-component', {
  props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會(huì)通過(guò)任何類型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對(duì)象
    propE: {
      type: Object,
      // 對(duì)象或數(shù)組默認(rèn)值必須從一個(gè)工廠函數(shù)獲取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定義驗(yàn)證函數(shù)
    propF: {
      validator: function (value) {
        // 這個(gè)值必須匹配下列字符串中的一個(gè)
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
})

當(dāng) prop 驗(yàn)證失敗的時(shí)候，(開(kāi)發(fā)環(huán)境構(gòu)建版本的) Vue 將會(huì)產(chǎn)生一個(gè)控制臺(tái)的警告。

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

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

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

自定義事件

父組件是使用 props 傳遞數(shù)據(jù)給子組件，但如果子組件要把數(shù)據(jù)傳遞回去，就需要使用自定義事件！

我們可以使用 v-on 綁定自定義事件, 每個(gè) Vue 實(shí)例都實(shí)現(xiàn)了事件接口(Events interface)，即：

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

另外，父組件可以在使用子組件的地方直接用 v-on 來(lái)監(jiān)聽(tīng)子組件觸發(fā)的事件。

以下實(shí)例中子組件已經(jīng)和它外部完全解耦了。它所做的只是觸發(fā)一個(gè)父組件關(guān)心的內(nèi)部事件。

實(shí)例

<div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script>

運(yùn)行代碼 ?

如果你想在某個(gè)組件的根元素上監(jiān)聽(tīng)一個(gè)原生事件?？梢允褂?.native 修飾 v-on 。例如：

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

data 必須是一個(gè)函數(shù)

上面例子中，可以看到 button-counter 組件中的 data 不是一個(gè)對(duì)象，而是一個(gè)函數(shù)：

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

這樣的好處就是每個(gè)實(shí)例可以維護(hù)一份被返回對(duì)象的獨(dú)立的拷貝，如果 data 是一個(gè)對(duì)象則會(huì)影響到其他實(shí)例，如下所示：

實(shí)例

<div id="components-demo3" class="demo"> <button-counter2></button-counter2> <button-counter2></button-counter2> <button-counter2></button-counter2> </div> <script> var buttonCounter2Data = { count: 0 } Vue.component('button-counter2', { /* data: function () { // data 選項(xiàng)是一個(gè)函數(shù)，組件不相互影響 return { count: 0 } }, */ data: function () { // data 選項(xiàng)是一個(gè)對(duì)象，會(huì)影響到其他實(shí)例 return buttonCounter2Data }, template: '<button v-on:click="count++">點(diǎn)擊了 {{ count }} 次。</button>' }) new Vue({ el: '#components-demo3' }) </script>

運(yùn)行代碼 ?
上一篇：Vue.js 表單 下一篇：Vue.js 自定義指令