Vue, редактировать содержимое компонентов с другим компонентом

Question

У меня есть простое приложение Vue js spa, которое содержит компонент bulma.io.И мне нужно редактировать содержимое компонентов с другим компонентом.

Как это изображение:

И как-то нам это нужно длядинамически отображать компонент формы при нажатии на панель или компонент сообщения.

Спасибо

Обновлено:

index.html

<div id="app">

    <div class="columns">

      <div class="column is-6">

        <message title="Message test title 1" body="Message test body 1" @titleUpdate="title = $event" @bodyUpdate="body = $event"></message>
        <message title="Message test title 2" body="Message test body 2" @titleUpdate="title = $event" @bodyUpdate="body = $event"></message>

        <card title="Card test title 1" body="Card test body 2" @titleUpdate="title = $event" @bodyUpdate="body = $event"></card>
        <card title="Card test title 1" body="Card test body 2" @titleUpdate="title = $event" @bodyUpdate="body = $event"></card>

      </div>

      <div class="column is-6">

        <messageform></messageform>

        <cardform></cardform>

      </div>

    </div>

  </div>

main.js

import Vue from 'vue'
import message from './components/message'
import card from './components/card'
import messageform from './components/messageform'
import cardform from './components/cardform'

/* eslint-disable */

new Vue({
  el: '#app',
  components: { message, card, messageform, cardform }
});

card.vue

<template>
  <div class="card">
    <div class="card-image">
      <figure class="image is-4by3">
        <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
      </figure>
    </div>
    <div class="card-content">
      <div class="media">
        <div class="media-left">
          <figure class="image is-48x48">
            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image">
          </figure>
        </div>
        <div class="media-content">
          <p class="title is-4">{{ title }}</p>
          <p class="subtitle is-6">@{{ title }}</p>
        </div>
      </div>

      <div class="content">
        {{ body }}
        <br>
        <time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['title', 'body'],
  name: 'card',
  methods: {
  }
}
</script>

<style scoped>
.card {
  margin-top: 20px
}
</style>

message.vue

<template>
  <article class="message" v-show="isShow">
    <div class="message-header">
      <p>{{ title }}</p>
      <button class="delete" aria-label="delete" @click="close"></button>
    </div>
    <div class="message-body">
      {{ body }}
    </div>
  </article>
</template>

<script>
export default {
  props: ['title', 'body'],
  name: 'message',
  data () {
    return {
      isShow: true
    }
  },
  methods: {
    close () {
      this.isShow = false
    }
  }
}
</script>

<style>
</style>

cardform.vue

<template>
  <article>

    <h1>Card form</h1>

    <div class="field">
      <label class="label">Card title</label>
      <div class="control">
        <input class="input" type="text" placeholder="Text input" :value="title">
      </div>
    </div>

    <div class="field">
      <label class="label">Card body</label>
      <div class="control">
        <textarea class="textarea" placeholder="Textarea" :value="body"></textarea>
      </div>
    </div>

  </article>
</template>

<script>
export default {
  props: ['title', 'body'],
  name: 'cardform'
}
</script>

<style>
</style>

messgeform.vue

<template>
  <article>

    <h1>Message form</h1>

    <div class="field">
      <label class="label">Message title</label>
      <div class="control">
        <input class="input" type="text" placeholder="Text input" :value="title" @input="titleUpdate">
      </div>
    </div>

    <div class="field">
      <label class="label">Message body</label>
      <div class="control">
        <textarea class="textarea" placeholder="Textarea" :value="body" @input="bodyUpdate"></textarea>
      </div>
    </div>

  </article>
</template>

<script>
export default {
  props: ['title', 'body'],
  name: 'messageform',
  methods: {
    titleUpdate (event) {
      this.$emit('titleUpdate', event.target.value)
    },
    bodyUpdate (event) {
      this.$emit('bodyUpdate', event.target.value)
    }
  }
}
</script>

<style>
</style>

Answer 1

Вам следует взглянуть на использование Передача данных дочерним компонентам с помощью реквизитов и Отправка сообщений родителям с событиями , поскольку оно охватывает все, что вам нужно знать для реализации этого.функциональность.

Когда вы хотите передать данные ребенку, вам нужно использовать реквизит и вернуть данные с помощью генератора событий.

Вы можете использовать eventbus или даже vuex.Я предлагаю вам сначала взглянуть на реквизит и события.

Answer 2

Не совсем уверен, что я понял ваш вопрос, но это может помочь вам, если вы хотите перенести данные / использовать функцию от одного компонента к другому.