«

vue实现双向绑定的方法有哪些

时间:2024-4-3 09:13     作者:韩俊     分类: Javascript


本文小编为大家详细介绍“vue实现双向绑定的方法有哪些”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue实现双向绑定的方法有哪些”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

vue实现双向绑定的方法:1、利用v-model指令实现绑定,自定义组件上的v-model相当于传递了modelValue prop并接收抛出的update:modelValue事件;2、利用vue-better-sync插件实现绑定;3、利用v-bind.sync修饰符,语法“<ChildComponent :title.sync="pageTitle" />”。

Vue 实现双向绑定的几种方法

1、v-model 指令

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果要将属性或事件名称更改为其他名称,则需要在 ChildComponent 组件中添加

model
选项:

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />
// ChildComponent.vue

export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: 'Default title'
    }
  }
}

所以,在这个例子中 v-model 是以下的简写:

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

Vue 3.x 中,自定义组件上的 v-model 相当于传递了

modelValue prop
并接收抛出的
update:modelValue
事件:

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

Vue3
可以绑定多个
v-model
, 例如:
<ChildComponent v-model:title="pageTitle" v-model:name="pageName" />

2、vue-better-sync 插件

有需求如此:开发一个 Prompt 组件,要求同步用户的输入,点击按钮可关闭弹窗。

一般我们会这样做:

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名?</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'prompt',
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit('input', value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit('update:visible', value)
      }
    }
  }
}
</script>

写一两个组件还好,组件规模一旦扩大,写双向绑定真能写出毛病来。于是,为了解放生产力,有了 vue-better-sync 这个轮子,且看用它如何改造我们的 Prompt 组件:

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名?</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from 'vue-better-sync'

export default {
  name: 'prompt',
  
  mixins: [
    VueBetterSync({
      prop: 'answer', // 设置 v-model 的 prop
      event: 'input' // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

vue-better-sync 统一了 v-model 和 .sync 传递数据的方式,你只需 this.actual${PropName} = newValue 或者 this.sync${PropName}(newValue) 即可将新数据传递给父组件。

GitHub:fjc0k/vue-better-sync

3、使用 v-bind.sync修饰符

在某些情况下,我们可能需要对某一个

prop
进行“双向绑定”(除了前面用 v-model 绑定 prop 的情况)。为此,我们建议使用
update:myPropName
抛出事件。例如,对于在上一个示例中带有 title prop 的 ChildComponent,我们可以通过下面的方式将分配新 value 的意图传达给父级:

this.$emit('update:title', newValue)

如果需要的话,父级可以监听该事件并更新本地 data property。例如:

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

为了方便起见,我们可以使用 .sync 修饰符来缩写,如下所示:

<ChildComponent :title.sync="pageTitle" />

标签: javascript vue

热门推荐