How to pass custom nativescript-Vue component to custom child Component

Question

I would like to add a dynamic child component to a parent component using Nativescript-Vue. For example:

<template>
    <MyParentComponent>
        <MyChildComponent :foo="foo"></MyChildComponent>
    </MyParentComponent>
<template>

<script>
    import MyParentComponent from './components/MyParentComponent';
    import MyChildComponent from './components/MyChildComponent';

    export default {
        components: {
            MyParentComponent,
            MyChildComponent
        },
        data: function(){
            return {
                foo: ''
            }
        }
    }
</script>

I think I need to define a slot in the parent component where the child component should be inserted, but I don't know how this should be done.

Any ideas?

tony19 · Accepted Answer · 2022-07-15 01:47:09Z

5

In MyParentComponent's template you need to add a <slot /> tag, that's where Vue will insert the content.

Read more about slots, and what they can do in the Vue docs: https://v2.vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots

edited Jul 15, 2022 at 1:47

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 24, 2018 at 13:16

Igor R.

8975 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hans Over a year ago

Fantastic. So it is exactly as it is in Vue.js. I don't know why my tests failed before, but now it works perfectly. Thanks!

Collectives™ on Stack Overflow

How to pass custom nativescript-Vue component to custom child Component

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related