vue 使用v-model綁定自定義子組件

v-model大部分解釋是語法糖，其實就是在父組件中定義一個變量，通過v-model綁定變量傳入子組件中，並在子組件改變這個值時，父組件能拿到最新到數據

下面具體說說如何通過v-model綁定自定義組件，算了，也沒什麼說的，也不知道咋說，直接看代碼吧！

首先我們有一個父組件

<template>
    <div>
        <el-button @click="dialogVisible_new = true">新增參數</el-button>
        <el-dialog
                title="新增參數"
                :visible.sync="dialogVisible_new"
                size="tiny"
        >
            <newParamModel ref="new" v-model="newParamData"/>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible_new = false">取 消</el-button>
                <el-button type="primary" @click="handleNewParam">新 增</el-button>
              </span>
        </el-dialog>
    </div>
</template>
<script>
    import newParamModel from "./newParamModel"
  export default {
    data() {
      return {
        newParamData:{
          name:"",
          required:false,
          explain:""
        },
        dialogVisible_new:false,
      }
    },
    components:{
      newParamModel
    },
    methods:{
      handleNewParam(){
        console.log(this.newParamData)
      }
    }
  }
</script>

功能是點擊按鈕彈出對話框，對話框是一個表單子組件，這裏綁定了變量newParamData，在子組件中用value來取model值，

下面是子組件newParamModel的代碼

<template>
    <div>
        <el-form :model="value" label-width="120px" ref="newParamForm" >
            <el-form-item label="參數名稱：" prop="name">
                <el-input v-model="value.name" placeholder="請輸入參數名稱"></el-input>
            </el-form-item>
            <el-form-item label="是否必填：" prop="required">
                <el-switch
                        v-model="value.required"
                        on-text="是"
                        off-text="否">
                </el-switch>
            </el-form-item>
            <el-form-item label="參數說明：" prop="explain">
                <el-input v-model="value.explain"
                          placeholder="請輸入參數說明"
                          type="textarea"
                          :rows="3"></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  export default {
    props:["value"]
  }
</script>

就這樣，父組件可以直接取到子組件中表單值到變化

也可以使用input事件向父組件傳值，

this.$emit('input',data)

有的時候可能value會報錯，vue不允許數據雙向綁定，這時候在子組件中定義一個新的變量代替value，最後通過input事件向父組件傳值就可以來