小编ico*_*ode的帖子

我想知道如何使用props和检索将对象传递给子组件.我理解如何将其作为属性,但如何传递对象并从子组件中检索对象？当我从子组件使用this.props时,我得到未定义或错误消息.

父组件

 <template>
        <div>
        <child-component :v-bind="props"></child-component>     
        </div>
    </template>

<script>
import ChildComponent from "ChildComponent.vue";

export default {
    name: 'ParentComponent',
    mounted() {

    },
     props: {
       firstname: 'UserFirstName',
       lastname: 'UserLastName'
       foo:'bar'
    },
    components: {
    ChildComponent
    },
    methods: {

      }
}
</script>

<style scoped>
</style>

儿童组件

<script>
<template>
   <div>
   </div>
</template>
export default {
    name: 'ChildComponent',
    mounted() {
    console.log(this.props)
  }  
}
</script>

我正在尝试使用导入和导出来创建模块，但无法正常工作。

我在index.html标头中添加了https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js并尝试导入js文件并收到一条错误消息，提示SyntaxError：导入声明只能出现在模块的顶层。我可能做错了什么？

我知道我可以使用require.js，而是使用import和export。

的HTML

 script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.min.js"></script

JS文件

  import Mymodule from './modules/mymodule';

我仍然对React还是陌生的，很难尝试弄清楚如果props返回true时如何显示div元素的内容。我知道我只能在一个函数中返回一个渲染，但是我该如何实现。我可以编写一些类型的Jsx内联if语句吗？

<div>if true show</div> 
<div>if true show</div> 
<div>false don't show</div> 
<div>if true show</div> 

更新：我实际上用过

{this.props.test === true &&
    <div>if true show</div>
  }