javascript - 如何将组件作为 prop 传递给 Vue.js 中的另一个组件

Question

我想将一个组件(比如说组件 B)作为 prop 传递给另一个组件(我们称之为组件 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>