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用于parent-child communication。您的信息面板和程序组件是独立的组件–彼此都不是子组件，因此它们无法相互传递道具。

他们可以从其父级（即Vue根实例）接收道具。程序组件可以emit events通知父组件它应该更新一些值，这会更新子组件中的道具。

如何将道具传递给vue.js中的另一个组件

1 个答案: