[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