码迷,mamicode.com
首页 > 其他好文 > 详细

vue 组件自定义v-model

时间:2019-04-17 15:23:02      阅读:145      评论:0      收藏:0      [点我收藏+]

标签:bow   组件   tom   log   html   created   add   默认   1.2   

 

参考资料:vue官网
在vue 中使用v-model双向绑定


<input v-model="something">

其实是语法糖


<input   :value="something"   @:input="something = $event.target.value">

自定义组件使用v-model

//父组件中调用
<child v-model="msg" />
//子组件代码

<template>
  <div>
    <slot />
  </div>
</template>

<script>
export default {
  name:‘child‘,
  componentName:‘child‘,
  data(){
    return {
      childVal:null
    }
  },
//vue中v-model默认绑定的是input事件,value参数,如果需要其他自定义的事件和数据名作为绑定,需要设置model
  model: {
    prop: ‘value‘,
    event: ‘change‘
  },
  props: {
    value: {}
  },
  created(){
    this.$emit(‘change‘, this.value);
  },
}

</script>
?

 

vue 组件自定义v-model

标签:bow   组件   tom   log   html   created   add   默认   1.2   

原文地址:https://www.cnblogs.com/calamus/p/10723515.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!