Question

虽然使用typeahead https://github.com/pespantelis/vue-typeahead可以在两个typeahead的搜索词之间进行两次绑定，所以基本上用户输入哪个搜索框并且两者都应该从不同的端点返回数据无关紧要？

<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/

vue.js

1 个答案: