时间戳

首页 > 解决方案 > 使用可选参数/可选道具创建组件

vuejs2 - 使用可选参数/可选道具创建组件

问题描述

我正在尝试创建我自己的第一个组件，并希望有一个简单的解决方案来创建可选参数，所以我的意思是可以使用但不需要使用的参数。

例如，我可以决定是否要使用

<my component :name="name" :description="description">

或仅

<my component :name="name">

所以在我看来，我只想定期导入组件“我的组件”。我的组件应该是什么样子？

我试过类似的东西：

    <template>
     <input
        :id="name"
        :name="name"
        type="text"
        :description="description"
      />
    </template>
    <script>
    export default {
       name: "adsInputText",
       props: {
         name: String,
         description: null
       },
    </script>

这只是我的问题的简化抽象。我已经玩过几个变种，但就是不能正确。

你知道一个简单的方法吗？

非常感谢马蒂亚斯

标签： vuejs2vue-component

解决方案

如果你想添加一个可选的 prop，那么你应该指明一个类型，并且可能想为它添加一个默认值：

 props: {
         name: String,
         description: {
           type: String,
           default: null
         }
       },

这样，如果您description在使用组件时没有指明 prop，您将获得null来自this.description而不是undefined.

推荐阅读