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?

Answer 1

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