Передать данные в другой компонент

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
            })
        }
    }
}

Мой вопрос таков: компонент компонента Message перечисляет все элементы, созданные компонентом 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>

Теперь, когда вы нажимаете edit для существующего сообщения, просто назначьте это «Message» свойству данных inputVal, сопоставив его с правильным текстом и идентификатором.