javascript - vue.js 中同级组件之间的两种方式绑定(bind)

Question

使用预输入时https://github.com/pespantelis/vue-typeahead我可以在两个预先输入的搜索词之间进行两次绑定(bind)吗？所以基本上用户在哪个搜索框中输入内容并不重要，但两者都应该从不同的端点返回数据？

<typeahead ep="http://localhost:8080/ep1"></typeahead>
<typeahead ep="http://localhost:8080/ep2"></typeahead>

Answer 1

是的。只需将相同的值传递给两个组件即可。

<typeahead ep="foo" v-model="someValue"></typeahead>
<typeahead ep="bar" v-model="someValue"></typeahead>

然后在您的组件中，当您 this.$emit 时，您传回父级的值都会更新。

这是一个非常简单的示例:

Vue.component('typeahead', {
  template: '<div><input v-model="displayValue"> on {{ endpoint }}</div>',
  props: {
    value: String,
    endpoint: String,
  },
  computed: {
    displayValue: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('input', value)
      },
    },
  },
})

这里它涉及一些常见场景，例如更改父级的值，确保父级数据在更改子级时更新等:https://jsfiddle.net/crswll/tLmszrp2/