javascript - 如何将 props 传递给 vue.js 中的另一个组件

Question

我正在尝试将 Prop 从程序组件传递到信息面板组件。将有 5 个不同的程序组件，当单击程序组件时，它们会将不同的 props 传递给 infopanel 组件。我整个早上都在做这个，但无法弄清楚这一点。有人可以指出我正确的方向吗？

/*
*   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 适用于 parent-child communication 。您的信息面板和程序组件是独立的组件 - 两者都不是对方的子组件，因此它们不能相互传递 props。

他们可以从他们的父级(即根 Vue 实例)接收 props。该程序组件可以emit events告诉父组件它应该更新一些值，这会更新子组件中的 props。