Question

我有一个简单的组件，在这里我尝试以两种方式绑定道具，但它只能以一种方式工作。当我更改输入字段中的文本时，尽管我更改了输入，但它显示“初始属性1”为myprop1的值。怎么了？

我的组件

Vue.component('simple-input', {

    template: `
        <div>
            <input type="text" :myprop1="myprop1" :value="myprop1" @input="$emit('input', $event.target.value)">
            <input type="text" :myprop2="myprop2" :value="myprop2" @input="$emit('input', $event.target.value)">
        </div>
    `,

    props: ['myprop1', 'myprop2']

});

main.js

new Vue({
    el: '#root',

    data: {
        myprop1: 'Initial property 1',
        myprop2: 'Initial property 2',
    },

    methods: {
        showMe()
        {
            alert('prop1 - ' + this.myprop1);
            alert('prop2 - ' + this.myprop2);

            this.myprop1 = 'new value';
            this.myprop2 = 'new value';
        }
    }
});

HTML

<simple-input :myprop1="myprop1" :myprop2="myprop2"></simple-input>

<button @click="showMe">Show me!</button>

Answer 1

有两个主要问题：

您的子组件正在为两个输入都发出input事件。您需要发出不同的事件，以便您可以在父组件中对其进行区分。另外：
- :myprop1="myprop1"对输入元素没有任何作用，在输入中没有这样的myprop1道具/属性。
- myprop是一个糟糕的名称，请改用value。
```
Vue.component('simple-input', {
  template: `
    <div>
      <input type="text" :value="value1" @input="$emit('update:value1', $event.target.value)">
      <input type="text" :value="value2" @input="$emit('update:value2', $event.target.value)">
    </div>
  `,
  props: ['value1', 'value2'],
});
```
在父组件中，您需要监听update:value1和update:value2事件，以便可以从子级接收新值。
```
<simple-input
  :value1="value1"
  :value2="value2"
  @update:value1="value1 = $event"
  @update:value2="value2 = $event"
></simple-input>
```
实际上，因为我们为事件使用了命名约定update:prop，所以我们可以使用sync修饰符使绑定成为2向。这样就变成了：
```
<simple-input
  :value1.sync="value1"
  :value2.sync="value2"
></simple-input>
```

当组件中的输入发生更改时，道具不会更新

1 个答案: