32.Vue 自定义组件使用v-model

在Vue2中自定义组件可以使用v-model指令,来实现双向绑定,前提条件:
1、接收一个value属性
2、在有新的value时触发intput事件

案例

index.vue

<template>
  <div>
      total值:{{total}}  <br/> <br/>
      <testVue v-model="total"></testVue>
  </div>
</template>
<script>
import testVue from './testVue'
export default {
  data(){
    return {
      total: 0    
    }
  },
  components: {
     testVue 
  }
}
</script>

testVue.vue

<template>
<div>
  传入的值: {{value}} <br/>
  <button @click="changeVal">改变值</button>
</div>
</template>
<script>
export default {
  data(){
    return {
      counter: 0
    }
  },
  propos: {
    // 接收外部通过v-model传入的只,必须是value
    value: {}
  },
  methods: {
    changeVal(){
      this.$emit('input', this.counter++)
    }
  }
}
</script>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,276评论 0 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,108评论 4 129
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,653评论 0 32
  • 1. 大数据产生背景 1.1. 概念的产生 1980年,托夫勒在《第三次浪潮》中提到“大数据”一词 2011年,麦...
    CareWB阅读 587评论 0 1
  • 中秋将至,寄份月饼表相思。 “妈,月饼你喜欢双黄莲蓉还是火腿五仁啊?” “我都不喜欢,你们那里的月饼又贵又不好吃!...
    醉瑶台1阅读 703评论 11 15