怎么用vue.js实现双向绑定

使用 v-model 指令实现双向绑定

Vue.js 提供了 v-model 指令用于在表单输入元素（如 input、textarea、select）上实现双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素的值。

<template>
  <div>
    <input v-model="message" placeholder="输入内容">
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  }
}
</script>

自定义组件实现双向绑定

在自定义组件中实现双向绑定，需要在组件内部使用 model 选项和 $emit 方法。

<template>
  <div>
    <custom-input v-model="message"></custom-input>
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

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

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

自定义组件 CustomInput.vue 的实现：

<template>
  <input
    :value="value"
    @input="$emit('input', $event.target.value)"
  >
</template>

<script>
export default {
  props: ['value']
}
</script>

使用 .sync 修饰符实现双向绑定

对于需要双向绑定的 prop，可以使用 .sync 修饰符。这种方法适用于非表单元素的双向绑定。

<template>
  <div>
    <child-component :title.sync="pageTitle"></child-component>
    <p>当前标题: {{ pageTitle }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      pageTitle: '初始标题'
    }
  }
}
</script>

子组件 ChildComponent.vue 的实现：

<template>
  <button @click="updateTitle">更新标题</button>
</template>

<script>
export default {
  props: ['title'],
  methods: {
    updateTitle() {
      this.$emit('update:title', '新标题')
    }
  }
}
</script>

使用计算属性实现复杂双向绑定

对于需要处理复杂逻辑的双向绑定，可以使用计算属性的 getter 和 setter。

<template>
  <div>
    <input v-model="fullName">
    <p>名字: {{ firstName }}</p>
    <p>姓氏: {{ lastName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`
      },
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0] || ''
        this.lastName = names[1] || ''
      }
    }
  }
}
</script>

使用 Vue 3 的 v-model 语法

在 Vue 3 中，v-model 语法有所变化，支持多个 v-model 绑定。

<template>
  <user-name
    v-model:first-name="firstName"
    v-model:last-name="lastName"
  ></user-name>
</template>

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

export default {
  components: {
    UserName
  },
  data() {
    return {
      firstName: '',
      lastName: ''
    }
  }
}
</script>

子组件 UserName.vue 的实现：

<template>
  <div>
    <input
      :value="firstName"
      @input="$emit('update:firstName', $event.target.value)"
    >
    <input
      :value="lastName"
      @input="$emit('update:lastName', $event.target.value)"
    >
  </div>
</template>

<script>
export default {
  props: {
    firstName: String,
    lastName: String
  }
}
</script>