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

使用 v-model 指令

Vue.js 提供了 v-model 指令用于在表单元素上实现双向数据绑定。v-model 会根据控件类型自动选取正确的方法来更新元素的值。以下是一个简单的例子：

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

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

自定义组件中的双向绑定

在自定义组件中实现双向绑定，需要使用 v-model 并定义 model 选项。子组件需要接收 value prop 并通过 $emit 触发 input 事件：

<!-- 父组件 -->
<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)"
    placeholder="输入内容"
  >
</template>

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

使用 .sync 修饰符

Vue.js 还提供了 .sync 修饰符来实现双向绑定。父组件通过 :propName.sync 传递数据，子组件通过 $emit('update:propName', newValue) 更新：

<!-- 父组件 -->
<template>
  <div>
    <custom-input :message.sync="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="message"
    @input="$emit('update:message', $event.target.value)"
    placeholder="输入内容"
  >
</template>

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

计算属性的 setter

对于需要复杂处理的双向绑定，可以使用计算属性的 setter：

<template>
  <div>
    <input v-model="fullName" placeholder="输入全名">
    <p>输入的全名是: {{ fullName }}</p>
    <p>姓氏: {{ lastName }}</p>
    <p>名字: {{ firstName }}</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>

使用 Vuex 实现全局状态绑定

在大型应用中，可以使用 Vuex 实现全局状态的双向绑定：

<template>
  <div>
    <input :value="message" @input="updateMessage" placeholder="输入内容">
    <p>输入的内容是: {{ message }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['message'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
}
</script>

Vuex store 配置：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, payload) {
      state.message = payload
    }
  }
})