javascript - 将数据传递给另一个组件

Question

我有一个简单的表单组件:

<template>
    <div>
        <form @submit.prevent="addItem">
            <input type="text" v-model="text">
            <input type="hidden" v-model="id">
            <input type="submit" value="enviar">    
        </form>
    </div>
</template>

此组件有一个使用 $emit 将文本项添加到父数据的方法:

addItem () {
    const { text } = this
    this.$emit('block', text)
},

这是我的主文件上的标记:

<template>
    <div id="app">
        <BlockForm @block="addBlock"/>
        <Message v-bind:message="message"/>
    </div>
</template>

脚本:

export default {
    name: 'app',
    components: {
        BlockForm,
        Message
    },
    data () {
        return {
            message : []
        }
    },
    methods: {
        addBlock (text) {
            const { message } = this
            const key = message.length
            message.push({
                name: text,
                order: key
            })
        }
    }
}

我的问题是:消息组件列出了 BlockForm 组件创建并存储在消息数组中的所有项目。我为消息列表中的每个项目添加一个编辑按钮。如何传递要在 BlockForm 组件中编辑的项目文本？

Answer 1

您可以将 BlockForm 内的输入绑定(bind)到父组件中的变量。这样，当您从子组件 $emit 时，只需将值添加到消息中即可。

export default {
    name: 'app',
    components: {
        BlockForm,
        Message
    },
    data () {
        return {
            message : [],
            inputVal: {
               text: '',
               id: ''
            }
        }
    },
    methods: {
        addBlock () {

            const key = this.message.length
            this.message.push({
                name: this.inputVal.text,
                order: this.inputVal.text.length // If the logic is different here, you can just change it
            })
            this.inputVal = {
               text: '',
               id: ''
            }
        }
    }
}

现在，当您调用 BlockForm 时，

<template>
    <div id="app">
        <BlockForm propVal="inputVal" @block="addBlock"/>
        <Message v-bind:message="message"/>
    </div>
</template>

以及 BlockForm 内部，

<template>
    <div>
        <form @submit.prevent="addItem">
            <input type="text" v-model="propVal.text">
            <input type="hidden" v-model="probVal.id">
            <input type="submit" value="enviar">    
        </form>
    </div>
</template>

现在，当您按编辑现有消息时，只需将该“消息”分配给 inputVal 数据属性，将其映射到正确的文本和 ID。