Question

如何将props传递给markdown / template语法中的组件？

我可以做一些像React <component :props="myObject"＆gt;？我将如何处理组件内部的内容？道具还必须在我的组件内声明，或者我可以拥有＆＃34; unknown＆＃34;一套道具？

我的本能，React受影响，会：

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

在我的Form.vue文件中，我不必声明props，并声明数据如下：

data(){
    return {title: '', subTitle: ''};
}

Answer 1

根据文件：

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

在您的情况下，父组件：

<template>
  <child :title-data="sample_data"></child>
</template>

您可以在父组件的'sample_data'中设置数据。

data: function () {
  return {
    sample_data: {
      'title': '',
      'subtitle': ''
    }
  }
}

子组件：

<template>
  <span> {{ titleData.title }} </span>
  <span> {{ titleData.subtitle }} </span>
</template>

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

是的，您必须在组件内声明道具。你可以用上面的方式声明它，或者你可以更明确地知道道具，从而验证道具。阅读以下内容：https://vuejs.org/v2/guide/components.html#Prop-Validation

另请阅读道具中的kebab-case vs camelCase：https://vuejs.org/v2/guide/components.html#camelCase-vs-kebab-case

详细了解道具：https://vuejs.org/v2/guide/components.html#Props

将道具传递到模板中

1 个答案: