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内部的输入绑定到父组件中的变量。这样，当您从子组件$ 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。

将数据传递到另一个组件

1 个答案: