Vue封裝組件標簽上使用v-model完成雙向綁定

1.普通v-model實現雙向綁定的使用

<input type="text" v-model="message">

vue在解釋v-model的時候會做一個轉化工作,實質是下面這樣：

<div id="app">
   <input type="text" :value="message" @input="message = $event.target.value">
   <span>{{message}}</span>
</div>
<script>
   var app2 = new Vue({
        el:'#app',
         data:{
             message:"Hello Vue"
         }
   });
</script>

 

2.封裝組件標簽上使用v-model完成雙向綁定

仿照v-model的實現方法，在自定義組件標簽上實現v-model功能

 

子組件：

<template>
  <div>
    <!--1 el-下拉選擇框 -->
    <el-select v-model="content" @change="handleInput" placeholder="請選擇">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
        :disabled="item.disabled">
      </el-option>
    </el-select>

    <!--2 原生下拉框 -->
    <!-- <select name="" id="" v-model="content" @change="handleInput">
      <option value="11">11</option>
      <option value="22">22</option>
      <option value="33">33</option>
    </select> -->

    <!--3 el-輸入框 -->
    <!-- <el-input v-model="content" @input="handleInput" placeholder="請輸入內容"></el-input> -->

    <!--4 原生輸入框 -->
    <!-- <input v-model="content" @input="handleInput" /> -->
  </div>
</template>

<script>
  export default {
    name: "HelloWorld",
    prop: ['newValue'],
    model: {
      event: 'input-change',
      prop: 'newValue'
    },
    data() {
      return {
        options: [{
          value: '選項1',
          label: '黃金糕'
        }, {
          value: '選項2',
          label: '雙皮奶',
          disabled: true
        }, {
          value: '選項3',
          label: '蚵仔煎'
        }, {
          value: '選項4',
          label: '龍須面'
        }, {
          value: '選項5',
          label: '北京烤鴨'
        }],
        content: this.newValue
      }
    },
    methods: {
      handleInput(e) {
        this.$emit('input-change', this.content)
      }
    }
  };
</script>
  
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 

父組件調用

<HelloWorld v-model="name" />更新了：{{ name }}

data(){
    return{
        name:'',
    }
}

 

結果 

原生html 和element框架里的組件都可以實現

 

 

我是馬丁的車夫，歡迎轉發收藏！