vue组件实现双向绑定

最新推荐文章于 2024-08-22 15:37:44 发布

huzhenv5

最新推荐文章于 2024-08-22 15:37:44 发布

阅读量417

点赞数

本文链接：https://blog.csdn.net/huzhenv5/article/details/120430757

版权

本文介绍了在Vue中如何实现组件的双向绑定。通过子组件的`v-model`语法糖，结合`props`接收父组件传递的值和`$emit`触发事件更新父组件状态，实现了父子组件间的双向数据同步。示例中展示了一个输入框组件，其值与父组件的数据双向绑定。

摘要由CSDN通过智能技术生成

vue组件实现双向绑定

在封装vue组件过程中，有时候会碰到需要实现组件的某个属性需要和父组件的某个值双向绑定，碰到这种情况如何实现呢？

比如，我们要封装一个输入框组件，父组件的某个值要和子组件的输入框中的值双向绑定，直接上代码：

父组件：

<template>
  <div>
    <div>
      <kkm v-model="datas"></kkm>
    </div>
    <div>
      <label>{{ datas }}</label>
    </div>
  </div>
</template>

<script>
import Kkm from './Kkm.vue'

export default {
  components: {
    Kkm
  },
  data() {
    return {
      datas: ''
    }
  }
}
</script>

子组件：

<template>
  <div>
    <label>key：</label>
    <input v-model="tva" @input="changeData"/>
  </div>
</template>

<script>
export default {
  model: {
    prop: 'tva',
    event: 'change-data'
  },
  props: {
    tva: String
  },
  methods: {
    changeData(event) {
      this.$emit('change-data', event.target.value)
    }
  }
}
</script>

我们来分析一下子组件的逻辑，其实这是一种语法糖的写法，子组件的输入框通过tva属性获取值；同时，通过input事件将输入框的最新值返回给父组件；这个属性和事件的关系再通过model属性关联到一起，我们就可以在子组中通过v-model直接实现双向绑定的功能了。