Vue 2.0學習筆記：自定義表單組件">Vue 2.0學習筆記：自定義表單組件

分類：IT技術 時間:2017-09-30

上一節中，通過 v-model 的學習，我們可以實現雙向數據綁定的的效果。在整個教程中，我們看到的示例都是表單控件方面的。實際上 v-model 還可以和組件結合在一起實現雙向數據的綁定效果。

在Web的表單控件中，我們經常為了一些特殊的視覺效果，做自定義的表單風格，比如單選按鈕、復選框和下拉選擇框之類的。那麽我們通過Vue來做這些表單控件的組件，會讓我們變得更為輕松，而且一勞永逸。接下來我們看看怎麽實現單選按鈕和復選框的組件。

自定義單選按鈕

與復選框相比，定制單選安扭相對而言要簡單。以下是一個非常基本的自定義單選按鈕。將 input 和 label 包裝在標簽中。下面這個示例是來自 @Invoke 的 Vue單選按鈕 。

我們把整個Demo寫在Codepen上，以便大家更為方便的查閱代碼。

創建 radio 組件，代碼如下： 

Vue.component('radio',{
    template: `
        <div class="custom-radio" v-bind:class="{ inverted: inverted }">
            <input type="radio" v-bind:name="name" v-bind:class="className" v-bind:id="id" v-bind:checked="checked" v-bind:value=http://www.tuicool.com/articles/"value" v-bind:required="required" v-on:change="updateInput" />
`, props: { name: { type: String, required: false }, className: { type: String, required: false }, id: { type: String, required: false }, value: { type: String, required: false }, required: { type: Boolean, required: false, default: false }, checked: { type: Boolean, required: false, default: false }, label: { type: String, required: true }, inverted: { type: Boolean, required: false, default: false } }, methods: { updateInput: function(event) { this.$emit('input', event.target.value); } } })

通過 Vue.component() 創建了一個 radio 組件，同時把組件需要的模板（HTML）結構定義在 template 中： 

<div class="custom-radio" v-bind:class="{ inverted: inverted }">
    <input type="radio" v-bind:name="name" v-bind:class="className" v-bind:id="id" v-bind:checked="checked" v-bind:value=http://www.tuicool.com/articles/"value" v-bind:required="required" v-on:change="updateInput" />

其實除了上面的方式之外，還可以單獨創建一個 radio.vue 文件，在這個文件中通過 <template> 來聲明組件所需要的標簽元素： 

<template>
    <div class="custom-radio" v-bind:class="{ inverted: inverted }">
        <input type="radio" v-bind:name="name" v-bind:class="className" v-bind:id="id" v-bind:checked="checked" v-bind:value=http://www.tuicool.com/articles/"value" v-bind:required="required" v-on:change="updateInput" />

組件對應需要的邏輯代碼放置在 <script> 中： 

<script>
    export default {
        props: {
            name: {
                type: String,
                required: false
            }, 
            className: {
                type: String,
                required: false
            },
            id: {
                type: String,
                required: false
            },
            value: {
                type: String,
                required: false
            },
            required: {
                type: Boolean,
                required: false,
                default: false
            },
            checked: {
                type: Boolean,
                required: false,
                default: false
            },
            label: {
                type: String,
                required: true
            },
            inverted: {
                type: Boolean,
                required: false,
                default: false
            }
        },
        methods: {
            updateInput: function(event) {
                this.$emit('input', event.target.value);
            }
        }
    }
</script>

我們創建了所需的 props 並將其傳遞給 input 。比如單選按鈕常見的一些屬性，比如 name 、 checked 、 id 等。除些之外，還可以添加 WAI-ARIA屬性 ，以及使用 slots 添加內容，而不是像上面在 label 裏的 props 。

在 props 中定義了單選按鈕組件需要的一些屬性，另外在 methods 中創建了一個 updateInput 方法，用來監聽 input 的變化。

這樣一來，咱們就完成了單選按鈕 radio 組件的創建，我們可以這樣使用： 

<!-- HTML -->
<div id="app">
    <radio name="method" value=http://www.tuicool.com/articles/"phone" label="Phone" id="phone">
    


// JavaScript
let app = new Vue({
    el:'#app'
})

除了這樣的方式之外，還可以這樣使用：

<template>
    <div id="app">
        <Radio name="method" value=http://www.tuicool.com/articles/"phone" label="Phone" id="phone"/>