如何正確傳遞道具？

Question

我不能傳遞多個元素。 我怎樣才能做到這一點？

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

Answer 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>

Answer 2

以下是如何在子組件中使用道具。

父組件：-

<template>
  <div id="app">
    <child data="Shreekanth is here"/>  // Child component and Ddta attribute passing to child component
  </div>
</template>

<script>
import Child from './components/Child.vue' // Child component imported

export default {
  name: 'App',
  components: {
    Child
  }
}
</script>

子組件：-

<template>
    <div>
        <div>{{data}}</div> // Used data attribute used in child template
    </div>
</template>

<script>
export default {
    name: 'Home',
    props: {
        data: String // How data attribute registed in child component 
    }
}
</script>