uniapp 自定义组件双向绑定

uniapp yekong

在UniApp中实现自定义组件的双向绑定,可以通过以下两种方式:

使用 v-model

v-model 是Vue.js中用于实现双向数据绑定的指令,它可以简化父子组件之间的数据同步过程。在UniApp中,自定义组件的双向绑定也可以通过使用 v-model 指令来实现。

在父组件中,首先定义一个数据对象,并将其通过 v-model 绑定到自定义组件上。例如:

<template>
  <custom-input v-model="value"></custom-input>
</template>

<script>
export default {
  data() {
    return {
      value: '' // 初始值
    };
  }
}
</script>

在自定义组件中,需要定义一个 input 事件,并在其中更新数据对象。当组件内部的输入值发生变化时,通过 $emit 触发 input 事件,并将新的值传递给父组件:

<template>
  <view>
    <input type="text" @input="onInput"/>
  </view>
</template>

<script>
export default {
  methods: {
    onInput(event) {
      this.$emit('input', event.target.value);
    }
  }
}
</script>

当在自定义组件中更改值时,父组件中的数据对象也会更新,实现了双向绑定。

使用 .sync 修饰符

除了 v-model,还可以使用 .sync 修饰符来实现双向绑定。这种方式需要在父组件中显式地监听子组件触发的更新事件,并更新相应的数据。

在父组件中,使用 .sync 修饰符绑定属性:

<custom-component :value.sync="value"></custom-component>

在自定义组件中,当值需要更新时,触发一个 update:value 事件:

this.$emit('update:value', newValue);

这样,每当自定义组件内部的值发生变化时,它就会通知父组件更新相应的绑定值,从而实现双向绑定。

综上所述,UniApp中自定义组件的双向绑定可以通过 v-model 指令或 .sync 修饰符来实现,这两种方式都能够同步父子组件之间的数据.

喜欢