如何正确传递道具？答案

【问题标题】：how to pass props correctly?如何正确传递道具？
【发布时间】：2020-09-30 12:57:53
【问题描述】：

我不能传递多个元素。我该怎么做？

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

【问题讨论】：

你想在你的组件中有多个props并通过吗？还是要将包含多个项目的对象传递给此 elem 道具？
除了 elem 我想传递哪个 Screen 是一个标志，它会给我信息我从父组件传递它
你能在你添加component和props的地方添加html block吗？

标签： javascript vue.js

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：