'How wrap another component and add a template to it in vue?
I have some components.
I need to add some tags and style to them, so wanted to wrap them by another component and do it. How can I add some tags to child?
new Vue({
el: '#app'
})
new Vue({
el: '#app2',
inheritAttrs: false,
props: ['childComponent']
})
Vue.component(
'wrapper',
{ extends: app2, props: { childComponent: { type: String, default: 'app' } } }
)
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
<div id="app">
<div>
This is my chid component
</div>
</div>
<div id="app2">
<div>
<component
:is="childComponent"
v-bind="$attrs"
v-on="$listeners"
>
<template>
<div>This is my wrapper component</div>
</template>
</component>
</div>
</div>
In my example, I need to get:
This is my chid component
This is my wrapper component
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
