Как передать реквизит другому компоненту в vue.js

Question

Я пытаюсь передать реквизиты из компонента программы в компонент инфопанели.Будет 5 различных программных компонентов, которые будут передавать различные реквизиты компоненту инфопанели при нажатии на программный компонент.Я был на этом все утро и не могу понять это.Может кто-нибудь, пожалуйста, укажите мне в правильном направлении?

/*
*   Components
*/


Vue.component('program', {
  data: function () {
    return {
        show: false
    }
  },
  props: {
    title: {
      type: String,
      required: false,
      default:""
    },
    imagesrc: {
      type:String,
      required:false,
      default: ""
    },
    photos: {
      type: Array, 
      default: function () {
        return [
          'https://10000leaders.com/wp-content/themes/moto/landingpage/images/eng-programs.jpg', 
          'https://10000leaders.com/wp-content/themes/moto/landingpage/images/eng-programs.jpg'
        ]
      }
    }
  },
  methods: {
      englishProgram: function () {
          this.show = true;
      }
  },
  template: `<div class='card card-default card-one'>
              <a href='javascript:;' class='card-link'>
                <span class='card-body'>
                  <span class='h3 heading'>{{ title }}</span>
                </span>
                <span class='card-img'>
                  <img class='img-responsive' :src='imagesrc'>
                </span>
              </a>
            </div>`
})  

Vue.component('infopanel', {
  data: function () {
    return {
        show: false
    }
  },
  props: {
    photos: {
      type: Array, 
      default: function () {
        return [
          'https://10000leaders.com/wp-content/themes/moto/landingpage/images/eng-programs.jpg', 
          'https://10000leaders.com/wp-content/themes/moto/landingpage/images/eng-programs.jpg'
        ]
      }
    }
  },
  methods: {
  },
  template: `<div id='infopanel'></div>`
})  

new Vue({ el: '#cards' });

        





<div id="cards" class='cards clearfix'>
    <program title="English Program" imagesrc="<?php bloginfo('stylesheet_directory'); ?>/landingpage/images/eng-programs.jpg"></program>
    <infopanel></infopanel>
</div><!--cards-->

Answer 1

props для родительско-дочернего общения . Ваша инфопанель и программные компоненты являются независимыми компонентами & ndash; они также не являются потомками другого, поэтому они не могут передавать друг другу реквизит.

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