vue model属性

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

vue是单项数据流，子组件不能直接修改父组件传过来的值，那非输入元素如何时间实时更新

我们常用的指令中v-model他实际上是语法糖

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

简单来讲就是将组件实现数据双向绑定的效果，需要注意的是自定义组件字眼表明其主要的使用场景是在组件内部，

export default { 
   props: { 
        num: Number ,
        list: { 
            type: Array, 
            default: () => { //属性默认值
                 return [ 
                      { value: '1', label: '111'}, 
                      { value: '2', label: '222'}, 
                      { value: '3', label: '333'}, 
                  ]
             }, 
        }
   }, 
   model: { 
        prop: 'num', // v-model接收的值=props的num属性接收的值
        event: 'update' //v-model发生变化时触发的方法

   }, 
   computed: { 
      currentNum： { 
           get() { 
              return this.num 
           }, 
           set(currentNum) { 
                  this.$emit('update', currentNum) 
           } 
       } 
   } 
   methods: { 
      add() { 
         this.currentNum++ 
         } 
      }
   }

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

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

外部使用：

<template>
  <myComponents v-model="num" :list="list"></myComponents >
</template>

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

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

父组件上如果有多属性：

可以使用v-model属性传递值做交互，也可以使用 .sync 修饰符做数据双向绑定交互处理，父组件通过 props 将值传给子组件，子组件再通过 $emit 将值传给父组件，父组件通过事件监听获取子组件传过来的值,如果想要简化这里的代码，可以使用.sync修饰符，实际上就是一个语法糖

//父组件
<child-box :value.sync="value" :label.sync="label" :option= "list"></child-box>

//自组件中在
// childBox.vue 
export default {
    methods: { 
        change(val) { 
            this.$emit('update:label', this.innerLabel)  
            this.$emit('update:value', val); 
        }
    }
}