如何正确传递道具?

时间:2020-09-30 12:57:53

标签: javascript vue.js

我不能传递多个元素。我该怎么办?

export default {
  props: {
    elem: {
      type: Object,
      required: true,
    },
    whichScreen: whichScreen
  },

1 个答案:

答案 0 :(得分:1)

您可以如下添加whichScreen道具:

export default {
   props : {
       elem : {
           type: Object,
           required: true,               
       },
       whichScreen : String
   }, 
}

您可以将props传递给组件,如下所示:

<my-component :elem="{ 'key' : 'value' }" :which-screen="'Screen 1'"></my-component>

完整的工作样本:

Vue.component('my-component', {
  template: '#tmpl-my-component',
  props : {
    elem : {
      type: Object,
      required: true,               
    },
    whichScreen : String
  },
});

new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-component :elem="{ 'key' : 'value' }" :which-screen="'Screen 1'"></my-component>
</div>


<template id="tmpl-my-component">
  <div>
    <div><h4>Prop `elem` :</h4> {{elem}}</div>
    <div><h4>Prop `whichScreen` :</h4> {{whichScreen}}</div>
  </div>
</template>