How can I make a component similar to vue-router router-link
where I get the tag via props to render my template ?
<my-component tag="ul"> </my-component>
Would render:
<ul> anything inside my-component </ul>
To pass props dynamically to dynamic component in Vue. js, we can use the v-bind directive. in the template to pass all the properties in the currentProperties as props to the dynamic component component. We set the component to load by setting the is prop to the currentComponent` component name string.
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
You can pass strings, arrays, numbers, and objects as props. But can you pass a function as a prop? While you can pass a function as a prop, this is almost always a bad idea. Instead, there is probably a feature of Vue that is designed exactly to solve your problem.
Props and data are both reactiveWith Vue you don't need to think all that much about when the component will update itself and render new changes to the screen. This is because Vue is reactive. Instead of calling setState every time you want to change something, you just change the thing!
You can use a built-in component
element like so:
<component is="ul" class="foo" style="color:red"> anything inside component </component>
See: https://vuejs.org/v2/guide/components.html#Dynamic-Components
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With