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

我不确定我是否理解您的问题，但如果您想将数据/使用功能从一个组件传输到另一个组件，this可能对您有所帮助。

Answer 2

您应该查看Passing Data to Child Components with props和Sending Messages to Parents with Events的用法，因为它将涵盖实现该功能所需了解的所有内容。

如果您想将数据传递给孩子，您需要使用道具并使用事件发射器获取数据。

您可以使用eventbus甚至vuex。我建议你先看一下道具和活动。

Vue，使用其他组件编辑组件的内容

2 个答案: