Question

我想将一个组件（比如说组件B）作为道具传递给另一个组件（我们称其为组件A），并在Vue.js中在组件A内显示组件B：

html：

<compA title="Title By Mazoo" content={compB}></compA>

js：

Vue.component('compA', {
    template: '<div>{{content}}</div> ',
    props: {
       content: ''
    }
});

Vue.component('compB', {
    template: '<div> Various html tags</div> ',

});

我知道上面的代码是错误的，在React中，我可以很容易地做到这一点：

<compA title="My title" content={<compB />} />

class compA extends React.Component {
    render() {
        return (
            <div>
                    {this.props.content}
            </div>

        );
    }
}

class compB extends React.Component {
    render() {
        return (
            <div>
                   Lots of HTML tags, etc
            </div>

        );
    }
}

Answer 1

您似乎需要slots。在compA中定义一个广告位，然后将compB作为compA的子元素：

Vue.component('compA', {
    template: '<div><slot></slot></div> '
});

Vue.component('compB', {
    template: '<div> Various html tags</div>',
});

在您的模板中：

<div id="app">
   <comp-a><comp-b></comp-b></comp-a>
</div>

如何将组件作为道具传递给Vue.js中的另一个组件

1 个答案: