关于vue的model属性

我们常用的指令中v-model

他实际上是语法糖

<template>
  <input v-model="value"/>
</template>

<script>
export default {
  data() {
    return {
        value:''
    };
  }
};
</script>

 

 

等于以下写法

 

<template> 
  <input :value="value" @input="(event)=>{value=event.value}"/>
</template>

<script>
export default {
  data() {
    return {
        value:''
    };
  }
};
</script>

 

 

 这种写法在于，input的value属性和input方法是固有的内容，所以v-model可以约定成俗的直接调用这两者，

 但我们自定义的组件可没有这种固有属性与对应的固有方法，那么model就用来设置这种关系的属性

//myComponent内部
<template>
    <p>{{isMessage}}</p>
</template>

<script>
export default {
  model:{
      prop:'message',// v-model接收的值=props的message属性接收的值
      event:'change'//v-model发生变化时触发的方法
  },
  props:{
    message:{
        type:string,
        default:''
    }
  },
  data() {
    return {
        isMessage:''"
    };
  }，
  methods:{
    change(value){
        console.log(value)
    }
  }
};
</script>

 

 

外部使用

<template>
  <myComponents v-model="aaa"></myComponents >
</template>

<script>
import myComponent from ‘xxx/xxx/myComponent.vue’

export default {
  cpmponents:{
    myComponent
  },
  data() {
    return {
        aaa:''"
    };
  }
};
</script>