且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

vue.js - 用vue实现类似知乎的timeline页面的时候,怎么使用组件?

更新时间:2023-11-02 11:08:10

如果,你想用不同item.type来指定子组件类型,可以给每个子组件一个固定的props,比如dataSet,这样可以通过绑定子组件的dataSet,将父组件中整个item传给子组件,如下(v-bind:简写为:):

<ul v-for:'item in timelineList'>
    <li>
        <component :is='item.type' :dataSet="item"></component>
    </li>
</ul>

当然,还有一种比较笨的方法,就是在父组件里手动判断子组件类型:

<ul v-for:'item in timelineList'>
    <li>
        <template v-if="item.type == 'A'">
            <A :dataSet='item'></A>
        </template>
        <template v-if="item.type == 'B'">
            <B :dataSet='item'></B>
        </template>
        ...
    </li>
</ul>