[Vue] Prop

prop命名

• Vue.component('myInput', ...) 等同於 Vue.component('my-input', ...)

prop類型

• 預設寫法

 props: ['value']

• 型別指定寫法

    props: {

        value: any,

        prefix: String,

        ...

    }

prop特性

• 沒給值預設值為true

<my-input type="text" v-model="title" show-prefix>

Vue.component('myInput', {

    props: {

        value: String,

        prefix: String,

        showPrefix: Boolean

    },

...

單向資料流

• 父組件的props更新後 => 更新子元件的props
• 子組件的props更新不會 => 更新父組件的props
• 不應該在子組件中變更props
• 若props的型別為Object或Array，子組件變更時，會影響到父組件

prop驗證

• 無驗證

props: {

    value: [String, Number]

}

• 加入驗證

props: {

    value: {

        type: [String, Number],

        required: true, // 必填

        default: 'success', // 預設值

        // 自定義驗證

        validator: function (value) {

        // 這個值必須匹配下列字符串中的一個

        return ['success', 'warning', 'danger'].indexOf(value) !== -1

      }

    },

    ...

}

type

可以是任一原生型別

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

也可以是自定義型別

class和style

從父組件給值時, 會和子組件合併

e.g.

• 子組件

<input class="AAA">

• 父組件

<my-input class="BBB">

最後渲染出來會是 <input class="AAA BBB">

source code

[Vue] 組件註冊

組件名稱

• Vue.component('組件名稱', {...})
• 建議命名時
• 全小寫
• 用一個前缀詞加上hyphon符號(-), 避免和其他名稱重複
• e.g. my-header

作用域

• 全域註冊

註冊方式: Vue.component('組件名稱', {...})

• 區域註冊

• 好處: 在component沒被使用時，就不會被build，產生多餘的程式碼
• 在子組件裡面也要使用的話，也需要在子組件中，再宣告一次

component宣告方式

const FooterComponent = {

    template: '<div>copyright @ blabalbala</div>'

}

根組件宣告方式

new Vue({

  ...

  components: {

    'my-footer': FooterComponent

  }

 ...

})

模塊系統

全域組件

• 將各個component獨立成一個檔案，匯入匯出在根組件前載入

局部組件

• 若有配合webpack或babel再深入研究

關鍵字: require, import

source code

[Vue] 組件基礎 2/2

組件的HTML規則

• 只能有一個根元素

e.g. 根結點不能二個元素並列, 一定要有明確的一個根結點

• 不行:

<h1></h1>

<div></div>

• 可以: (再包一層)

<div>

    <h1></h1>

    <div></div>

</div>

• 模板字符串(``) 不支援IE, 需用折行轉譯字符代替

• 不支援IE

Vue.component('component-name', {

template:`content

                line2

                line3`

}

• 可支援IE

Vue.component('component-name', {

template:"content\

                line2\

                line3"

}

監聽子組件事件

子組件向外發出事件的方法

• 子組件

Vue.component('my-header', {

    props: ['title'],

    template: `<div>

    <h1>{{title}}</h1>

    <button v-on:click="$emit('event-emit-test')">event emit</button>

</div>

    `

})

• 父組件

<my-header title="Vue練習" @event-emit-test="catchClickCount+=1"></my-header>

*. $emit('事件名稱')

*. 接收方用事件名稱直接接收

監聽子組件事件(含參數傳遞)

• 子組件

Vue.component('my-header', {

    props: ['title'],

    template: `<div>

    <h1>{{title}}</h1>

    <button v-on:click="$emit('event-emit-test',2)">event emit</button>

</div>

    `

})

• 父組件

<my-header title="Vue練習" @event-emit-test="catchClickCount+=$event"></my-header>

v-model

v-model 就是一個bind和一個event組成的

• 子組件

Vue.component('my-input', {

    props: ['value'],

    template: `

    <div>

    Hi~~~my input

    <input

        v-bind:value="value"

        v-on:input="$emit('input', $event.target.value)"

    />

    </div>

    `

})

• 父組件

<my-input v-model="variableName"></my-input>

插槽(slot)

可在自定義的組建中預留空間, 讓父組件放置

• 子組件

Vue.component('my-block', {

    template: `

    <div class="block">

        <slot></slot>

    </div>

    `

})

• 父組件

<my-block>

    // 把內容裝進來

</my-block>

動態組件

<component v-bind:is="要綁定的組件"></component>

要綁定的組件有二種用法

• 組件的名稱
• 組件本身

其他關鍵字

• vue is

is="這邊可塞入component"

• 字符串 (例如：template: '...')
• 單文件組件 (.vue)
• <script type="text/x-template">

source code