Vue组件的v-model 和 Vue2 中的.sync理解

组件的v-model 和 Vue2 中的.sync理解

$event 事件拿到的值

• 当我们元素是自定义事件的时候我们 $event拿到的就是我们的原生事件
• 当我们的元素 是 一个组件 的 时候，我们可以 使用$event 拿到组件$emit抛出的值

在Vue3当我们给组件v-model等于一个值的时候，组件会给我们默认绑定一个属性:modelValue和自定义属性on-update:modelValue:f($even)

  <!-- <HelloWorld msg="ganbadie" v-model="title"/> -->
  <!-- 相当于 -->
   <HelloWorld msg="ganbadie" :modelValue="title" @update:modelValue="title = $event "/>

注意这里的: modelValue 如果我们写成(model-value)， vue-cli也会帮我们把他自动转换成一个 小驼峰(modelValue)

显然我们 知道v-model传递了一个属性和自定义事件过来，那么组件props就可以来接收,和emit触发我们的事件，配合computed从而实现一个 v-model 的双向绑定

//父组件
  <h1>{{title}}</h1>
  <HelloWorld msg="ganbadie" v-model="title"/>

//HelloWorld 组件
<template>
  <div>
    <input type="text" v-model="inputVal">
  </div>
</template>

<script>
export default {
  emits:["update:model-value"],

  props:{
    modelValue:{
      type:String,
      default:() => " "
    }
  },

  computed:{
    inputVal:{
      set(val){
        this.$emit('update:model-value', val);
      },
      get(){
        return this.modelValue
      }
    }
  },
}
</script>

当我们想绑定 多个值的 时候 我们可以这么做

 <HelloWorld  v-model="title" v-model:msg="msg"/>

---

v-model 默认 会有 绑定 值 ，而给v-model:msg 也会有对应的属性进行绑定，所以想实现 对应的双向绑定 也就比较简单了

而在Vue2中呢，当我们给组件一个v-model等于一个值的时候，组件会给我们默认绑定一个属性:value，他是没有给我们绑定自定义事件的

但是 我们可以 给他加一个自定义事件 来实现双向绑定

//父组件
<template>
     {{ title }}
     <v-model v-model="title" @update:title="title = $event"></v-model>
</template>

<!-- 略-->
 data(){
    return {
      title:"",
      msg:""
    }
  }


//v-model组件
<template>
  <div>
    <input type="text" v-model="inputValue" />
  </div>
</template>

<script>
export default {
  props: ["value"],  //通过v-model 传过来 过来 默认 就是一个 value
      
  data() {
    return {};
  },

  computed: {
    inputValue: {
      get() {
        return this.value;
      },

      set(val) {
        this.$emit("update:title", val);
      },
    },
  },

  methods: {},
};
</script>

<style scoped></style>

接下来就引出我们的.sync的使用,达到一个双向绑定

<template>
     {{ title }}
     <v-model :title.sync="title"></v-model>  #.sync 就是下边这种的语法糖
       <!-- 相当于 -->
    <!--  <v-model :title="title" @update:title="title = $event"></v-model>  -->
</template>

<!-- 略-->
 data(){
    return {
      title:"",
      msg:""
    }
 }


//v-model组件

  props: ["title"], //因为上边是通过 :绑定传递过来的，这里要改成title,

当然我们.sync 最后的使用场景是一些简单的数据