Vue组件实现v-model支持双向绑定

通常我们做Vue组件开发的prop绑定是这样的

<ComponentA :data="123" />

事件的绑定是这样的

<ComponentA :data="123" @change="DataChange" />

整个页面是这样的

<template> 
  <ComponentA :data="data" @change="dataChange" /> 
</template>
<script> 
  import ComponentA from './component-a' 
  export default { 
    components: { ComponentA },
    data() { 
      return{
        data: '123'
        } 
        }, 
    methods: { 
      dataChange(val) { 
        this.data = val 
        console.log(this.data) 
      }
    } 
  }
</sctip>

 

组件是这样的

<template> 
  <el-input v-model="text" @change="change" clearable></el-input>
</template> 
<script>
export default {
  props: {
    data: {
      type: String,
      default: ''
    }
  },
  data() {
    return { text: '' }
  },
  create() {
    this.text = this.data
  },
  methods: {
    change() {
      this.$emit('change', this.text)
    }
  }
}
</script>

 

这样就可以把组件内改变后的值回传给页面

那么,可不可以在页面上通过v-model给组件绑定页面变量来实现双向绑定呢,当然是可以的,不过要做一些修改。

页面修改如下:

<template> 
    <ComponentA :data="data" @change="dataChange" /> 
</template> 
<script>
import ComponentA from './component-a'
export default {
  components: { ComponentA },
  data() {
    return { data: '123' }
  }
}
</script>

组件修改如下:

<template> 
  <el-input v-model="text" @change="change" clearable></el-input>
</template> 
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return { text: '' }
  },
  create() {
    this.text = this.value
  },
  methods: {
    change() {
      this.$emit('input', this.text)
    }
  }
}
</script>

当通过v-model绑定组件时,组件默认prop参数为value,组件默认的emit事件为input,通过这两个地方的修改,页面传参时就可以能过v-model来实现双身绑定的效果。

 

You may also like...

发表评论

电子邮件地址不会被公开。 必填项已用*标注