组件中的输入更改时道具不会更新

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

有2个主要问题：

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'], });

2. 在您的父组件中，您需要监听update:value1和update:value2事件，以便您可以从子组件接收新值。

    <simple-input :value1="value1" :value2="value2" @update:value1="value1 = $event" @update:value2="value2 = $event" ></simple-input>

事实上，因为我们对事件使用了命名约定update:prop ，所以我们可以使用sync修饰符来进行 2-way 绑定。 所以它变成了：

<!-- language: lang-vue -->

    <simple-input
      :value1.sync="value1"
      :value2.sync="value2"
    ></simple-input>