Question

我在网上找不到任何文档或示例，但这是将多个道具传递给组件的正确方法吗？

这里我尝试过：

HTML中的

<component:prop1="data1" :prop2="data2"></component>

component.js中的

props: ['prop1','prop2'],

但是很不理想......

Answer 1

您可以将多个道具传递给此类组件。在父组件中：

<template>
  <div>
    {{propA}}
    {{propB}}
  </div>
</template>

<script>
export default {
  props: {
    propA: Number,
    propB: String
  }

}
</script>

<style lang="css">
</style>

在子组件中：

import javax.sound.midi.*;
    public class MiniMiniMusicApp {
        public static void main(String args[]) {
            if(args.length<2) {
                System.out.println("Please enter both instument and notes");
            }
            else {
                int instrument = Integer.parseInt(args[0]);
                int notes = Integer.parseInt(args[1]);
                play(instrument, notes);
            }


        }// close main 

        static public void play(int instrument, int note) {

            try {   
                Sequencer player = MidiSystem.getSequencer();
                player.open();

                Sequence seq = new Sequence(Sequence.PPQ, 4);
                Track track = seq.createTrack();

     // the below Program_change code is creating the problem if we remove the below block the program creates sound

                ShortMessage first = new ShortMessage();
                first.setMessage(ShortMessage.PROGRAM_CHANGE,1,instrument,0);
                MidiEvent changeInstrument = new MidiEvent(first,1);
                track.add(changeInstrument);


                ShortMessage a = new ShortMessage();
                a.setMessage(ShortMessage.NOTE_ON,1,note,100);
                MidiEvent noteOn = new MidiEvent(a,1);  
                track.add(noteOn);



                ShortMessage b = new ShortMessage();
                b.setMessage(ShortMessage.NOTE_OFF,1,note,100);
                MidiEvent noteOff = new MidiEvent(b,16);
                track.add(noteOff);

                player.setSequence(seq);
                player.start();



            } catch (Exception ex) {        
                ex.printStackTrace();
            } 
        }
    }

参考：
Vue Prop-Validation

编辑：
更多信息和示例参考可在以下位置找到：
Passing-Data-to-Child-Components-with-Props

Answer 2

尽管有点老了，我还是想贡献一点。如果您想一次“传递”一堆属性，可以使用“ v-bind”

假设您的组件有很多道具：

props: ['age', 'year', 'date']

代替下面的常规方式：

<MyAwesomeComponent :age="age" :year='year' :date='today' />

也可以这样做：

<MyAwesomeComponent v-bind="groupedProps" />

成为“ groupedProps”以下对象：

groupedProps: {age:134, year:2153, today: new Date()}

... v-bind =“ groupedProps” ...

Answer 3

我想你想问这个问题

在parent.js

props: ['prop1','prop2'],

，您想使用父级的属性将某些属性绑定到子级组件。

child.js
props: ['prop11', 'prop21']

我只想确认以上问题是否正确。如果是，则应执行以下操作

parent.js
data() {
   return {
     prop11: this.prop1,
     prop12: this.prop2
   }
}

and bind it
<child :prop1:"prop11" :prop2:"prop21"/>

vue2：可以将多个道具传递给组件吗？

3 个答案: