如何将自定义 nativescript-Vue 组件传递给自定义子组件

Question

我想使用 Nativescript-Vue 将动态子组件添加到父组件。例如：

<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>

我想我需要在父组件中定义一个应该插入子组件的插槽，但我不知道该怎么做。

有什么想法吗？

Answer 1

在MyParentComponent的模板中，你需要添加一个<slot />标签，这是Vue插入内容的地方。

在 Vue 文档中阅读更多关于插槽以及它们可以做什么的信息： https://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots