Javascript 将道具传递到模板中

Javascript 将道具传递到模板中,javascript,vue.js,Javascript,Vue.js,如何以标记/模板语法将props传递到组件中 我可以做一些像React这样的事情吗?我将如何在我的组件中处理它?道具是否也必须在我的组件中声明,或者我是否可以拥有“未知”的道具集 我的直觉会: <template> <div> <component :is="Form" :prop="{title: 'foo', subTitle: 'bar'}"></component> </div> </tem

如何以标记/模板语法将
props
传递到组件中

我可以做一些像React
这样的事情吗?我将如何在我的组件中处理它?道具是否也必须在我的组件中声明,或者我是否可以拥有“未知”的道具集

我的直觉会:

<template>
    <div>
        <component :is="Form" :prop="{title: 'foo', subTitle: 'bar'}"></component>
    </div>
</template>

根据文件:

道具是用于从父组件传递信息的自定义属性。子组件需要使用props选项显式声明它希望接收的props:

在您的情况下,父组件:

<template>
  <child :title-data="sample_data"></child>
</template>
<template>
  <span> {{ titleData.title }} </span>
  <span> {{ titleData.subtitle }} </span>
</template>

<script>
export default {
  name: 'child',
  props: ['titleData']
}
</script>
子组件:

<template>
  <child :title-data="sample_data"></child>
</template>
<template>
  <span> {{ titleData.title }} </span>
  <span> {{ titleData.subtitle }} </span>
</template>

<script>
export default {
  name: 'child',
  props: ['titleData']
}
</script>

{{titleData.title}}
{{titleData.subtitle}
导出默认值{
姓名:'儿童',
道具:['titleData']
}
是的,您必须声明组件内的道具。您可以用上面的方式声明它,也可以更明确地说明道具,从而验证道具。请阅读以下关于如何进行的内容:

另外,请阅读道具中的烤羊肉串案例与camelCase案例:


阅读有关props的更多信息:

它们(props)必须在组件内部声明。此外,如果使用属性绑定:prop='some',则可以在数据属性中声明。您的问题通常是将道具传递给组件还是将道具传递给动态组件是因为
?@AmreshVenugopal我想将道具动态传递给
,我正在使用一个名为
表单
的组件(这是一个提交表单),我想将
道具
传递给它,以便添加输入、选择、,按钮取决于
道具
对象。如果我不清楚,来自React world,对Vue.js非常好奇,请告诉我!谢谢你调查我的问题!我只看到一次
:标题数据
,这不应该是我在
子组件中使用的属性名称吗?因为
title data
不是一个具有特殊功能性的保留字,对吗?它是在子对象中声明的prop,请参见props:['titleData'],看看这个以了解大小写的变化:基本上,如果你的prop是'titleData'(camelCase),那么当你在html中将它用作属性时,它必须用作'title data'(烤肉串大小写).我想是的,有一件事我不确定,但我想我会在这件事上加上一个新问题。非常感谢。