How to useDynamic Props Approach in Vue
In this approach, we are using Dynamic props like value and dataType. We have passed the multiple data types to the value props. The user can select the type from the selection box and based on the user input the value of that type will be shown.
Syntax:
props: {
value: [String, Number, Boolean], // Multiple data types for the 'value' prop
dataType: String, // Single data type for the 'dataType' prop
},
Example: The below example will illustrate the use of the dynamic props approach with practical implementation.
HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Vue.js Props Example </title> <script src="https://cdn.jsdelivr.net/npm/vue@2"> </script></head><body> <div id="app"> <h1 style="color:green"> w3wiki </h1> <h3> Approach 2: Using Dynamic Props Approach </h3> <label for="dataType"> Select Data Type: </label> <select id="dataType" v-model="selectedDataType" @change="changeDataType"> <option value="String"> String </option> <option value="Number"> Number </option> <option value="Boolean"> Boolean </option> </select> <dynamic-component :value="dynamicProp" :dataType="selectedDataType"> </dynamic-component> </div> <script> Vue.component('dynamic-component', { props: { value: [String, Number, Boolean], dataType: String, }, template: ` <div> <p>Data Value: {{ value }}</p> </div>`, }); new Vue({ el: '#app', data: { dynamicProp: 'Hello, GFG!', selectedDataType: 'String', }, methods: { changeDataType() { switch (this.selectedDataType) { case 'String': this.dynamicProp = 'Hello, GFG!'; break; case 'Number': this.dynamicProp = 42; break; case 'Boolean': this.dynamicProp = true; break; } }, }, }); </script></body></html> |
Output:
How to Add Multiple Data Types for Props in VueJS ?
Props are used to pass the data from the parent component to the child component. We can pass the multiple data types for props by using the type option or by using the Dynamic props. In this article, we will see the practical implementation of adding multiple data types for props in VueJS.
Table of Content
- Using type Property
- Using Dynamic Props Approach