VUE自定义组件v-model使用

javascript
  目录
  1. 1. VUE自定义组件v-model使用

vue中自定义组件v-model双向数据绑定的使用

VUE自定义组件v-model使用

我们在写vue组建的时候，可以往组件里传prop，但是普通的属性都是单向数据流，要想在子组件里修改父组件里值，必须在父组件中定义一个事件，在子组件里this.$emit('事件名','...参数'),但是我觉得好麻烦，要想实现数据的双向绑定还得定义子组件调用的事件方法，我们可以直接使用v-model,可以简单些。
父组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<template>
  <div>
    <Child v-model="val" />
  </div>
</template>
export default {
  data () {
    return {
      val: 123
    }
  },
  components: {
    Child
  }
}

子组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
    {{value}}
    <div @click="changeVal"></div>
  </div>
</template>
export default {
  data () {
    return {
    }
  },
  props: ['value'],
  methods: {
    changeVal () {
      this.$emit('input', 456); // 注意这里默认是input事件哦
    }
  }
}

是不是双向数据绑定写着会简单些。
最后，看一下vue中v-model的语法糖：

1
2
<input v-model="price">
<input type="text" :value="price" @input="price=$event.target.value">

  vue