将数据传递给另一个组件答案

【问题标题】：Pass data to another component将数据传递给另一个组件
【发布时间】：2019-01-31 08:05:05
【问题描述】：

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

<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 组件中传递要编辑的项目文本？

【问题讨论】：

创建一个数据属性来存储正在编辑的消息，然后将此数据属性绑定到<BlockForm>的一个prop（如prop-text），在<BlockForm>内部，创建一个数据属性然后使用一个观看以复制prop-text 的最新值。单击“addBlock”按钮，发出该数据属性。
这对于 Vue 新手来说有点混乱。但我会在这里尝试。
类似这样：消息组件告诉父组件哪个消息正在编辑，然后父组件将该消息加载到BlockForm，点击addBlock按钮后，BlockForm告诉父组件做了什么（就像你已经做了什么[发出一个事件=**block** 告诉父组件向消息列表添加新内容]).
@marcelo2605 对于这种情况，您应该使用 vuejs mixin 和 eventHub，它们可以帮助您使用 $on 和 $emit vuejs 事件来通信组件。此链接将为您提供帮助：vuejs.org/v2/guide/mixins.html#Global-Mixin

标签： javascript vue.js vuejs2

【解决方案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。

【讨论】：

谢谢！我做了一些你给我的想法的调整。
是的。这是我一直以来的计划