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>
复制代码