如何在Vue.js中为props添加多个数据类型

javascript属性名称不区分大小写，因此浏览器会将任何大写字母解释为小写字母。这意味着，在使用DOM元素时，驼峰式的props名称需要使用基于减号分割的等效值。

所以，假设你不确定在Vue.js中的props可能接收到的值类型。通常，你希望每个prop都有一个特定类型的值。但是在某些情况下，如果你想要一个prop具有多种值类型的列表，你可以使用以下语法来实现。

props: {                    
   value: [Number, String, Array]   
}

为了更好地理解，请看以下示例

示例

在您的Vue项目中创建两个文件app.js和index.html。以下为两个文件的代码片段和目录。将以下代码片段复制并粘贴到您的Vue项目中，并运行Vue项目。您将在浏览器窗口上看到以下输出。

文件名 – app.js
目录结构 – $项目/public – app.js

// Possible value of props is String & Number
Vue.config.devtools = false;
Vue.config.productionTip = false;

Vue.component('test-component', {
   name: 'TestComponent',
   props: {
      username: {
         type: [ String, Number ]
      }
   },
   template: `<div>username: {{ username }}</div>`
});

new Vue({ el: '#app' });

文件名 – index.html
目录结构 — $ project/public — index.html

<!DOCTYPE javascript>
<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id="app">
         <!-- value type: String -->
         <test-component :username="'user 38'"></test-component>

         <!-- value type: Number -->
         <test-component :username="59"></test-component>

         <!-- value type: null is valid, it is not required -->
         <test-component :username="null"></test-component>

         <!-- value type: missing property is valid, it is not required -->
         <test-component></test-component>

         <!-- invalid: Array -->
         <test-component :username="['test', 456]"></test-component>
      </div>
      <script src='app.js'></script>
   </body>
</javascript>

运行以下命令以获取下面的输出：

C://my-project/ > npm run serve

完整示例

让我们将上述两个文件app.js和index.html合并成一个javascript文件

<!DOCTYPE javascript>
<javascript>
<head>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
   <body>
      <div id="app">
         <!-- value type: String -->
         <test-component :username="'user 38'"></test-component>
         <!-- value type: Number -->
         <test-component :username="59"></test-component>
         <!-- value type: null is valid, it is not required -->
         <test-component :username="null"></test-component>
         <!-- value type: missing property is valid, it is not required -->
         <test-component></test-component>
         <!-- invalid: Array -->
         <test-component :username="['test', 456]"></test-component>
      </div>
      <script>

         // Possible value of props is String & Number
         Vue.config.devtools = false;
         Vue.config.productionTip = false;
         Vue.component('test-component', {
            name: 'TestComponent',
            props: {
               username: {
                  type: [ String, Number ]
               }
            },
            template: `<div>username: {{ username }}</div>`
         });
         new Vue({ el: '#app' });
      </script>
   </body>
</javascript>

在这个教程中，我们学习了如何在Vue.js中为props添加多种数据类型。我们在Vue项目中定义了两个文件app.js和index.html。最后，我们将这两个文件合并为一个单独的javascript文件，使其可以作为一个html / JavaScript文件运行。