vue自定義組件的v-model和sync

在vue寫自定義組件時，不少時候會涉及到子組件修改父組件的值，通常咱們都會想到v-bind和v-on來實現，下面就是本文要講的v-bind和v-on的語法糖v-model和sync：

.sync修飾符

sync是vue的一個語法糖，主要是爲了實如今子組件改變父組件的變量，具體寫法以下：

父組件

<template>
    <div class="parent">
        parent組件--{{toAbout}}
        <!--update:about爲固定寫法,about即爲v-bind綁定的變量-->
        <!--<About :about="toAbout" @update:about="val => toAbout = val"></About>-->
        <!--這個爲上面代碼的簡寫即語法糖-->
         <About :about.sync="toAbout"></About> 
    </div>
</template>

<script>
import About from './About.vue'
export default {
    components: {
        About
    },
    data() {
        return {
            toAbout: false
        }
    }
    
}
</script>
複製代碼

子組件

<template>
  <div class="home">
    vue+js項目
    <hr>
    {{about + ''}}
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  props: ['about'],
  methods: {
    change() {
      // 調用父組件的update:about方法，將變量放在第二個參數，便可改變父組件的變量
      this.$emit('update:about', !this.about)
    }
  }
}
</script>
複製代碼

自定義組件的v-model

v-model也是vue的一個語法糖，主要是爲了實如今父組件和子組件的變量雙向綁定，即同時改變，具體寫法以下：

父組件

<template>
    <div class="parent">
        parent組件--{{toAbout}}
        <br>
        <input type="text" v-model="toAbout">
        <hr>
        <!--value 和 input 爲默認寫法，若是要修改成其餘須要在子組件中使用model進行配置-->
        <!-- <About :value="toAbout" @input="val => toAbout = val"></About> -->
        <!--這個爲上面代碼的簡寫即語法糖-->
        <About v-model="toAbout"></About>
    </div>
</template>

<script>
import About from './About.vue'
export default {
    components: {
        About
    },
    data() {
        return {
            toAbout: 'default'
        }
    }
    
}
</script>
複製代碼

子組件

<template>
  <div class="home">
    vue+js項目
    <hr>
    {{value + ''}}
    <input type="text" v-model="childAbout">
  </div>
</template>

<script>
export default {
  // 使用value進行接收
  props: ['value'],
  data() {
    return {
    }
  },
  computed: {
    childAbout: {
      get() {
        return this.value
      },
      set(val) {
        // 調用父組件的input方法，將變量放在第二個參數，便可改變父組件的變量
        this.$emit('input', val)
      }
    }
  }
}
</script>
複製代碼

自定義組件v-model中自定義接收變量和方法

v-model默認的是使用value傳遞參數，使用input綁定方法，有時候咱們並不想使用默認的而是想本身定義那麼就使用到了model

父組件

<template>
    <div class="parent">
        parent組件--{{toAbout}}
        <br>
        <input type="text" v-model="toAbout">
        <hr>
        <!-- 咱們自定義使用 custom傳遞變量 使用customFunc綁定方法 -->
        <!-- <About :custom="toAbout" @customFunc="val => toAbout = val"></About> -->
        <!--這個爲上面代碼的簡寫即語法糖-->
        <About v-model="toAbout"></About>
    </div>
</template>

<script>
import About from './About.vue'
export default {
    components: {
        About
    },
    data() {
        return {
            toAbout: 'default'
        }
    }
    
}
</script>
複製代碼

子組件

<template>
  <div class="home">
    vue+js項目
    <hr>
    {{custom + ''}}
    <input type="text" v-model="childAbout">
  </div>
</template>

<script>
export default {
  // 重點即爲model  prop指向v-bind綁定的值（即prop使用什麼接收），event指向v-on綁定的值（即$emit調用哪一個方法返回）
  // 注意是 prop   而不是 props
  model: {
    prop: 'custom',
    event: 'customFunc'
  },
  // 使用custom進行接收
  props: ['custom'],
  data() {
    return {
    }
  },
  computed: {
    childAbout: {
      get() {
        return this.custom
      },
      set(val) {
        // 調用父組件的customFunc方法，將變量放在第二個參數，便可改變父組件的變量
        this.$emit('customFunc', val)
      }
    }
  }
}
</script>
複製代碼