首页 > vue中,父组件可以向子组件传递一个组件(不仅是数据)吗?

vue中,父组件可以向子组件传递一个组件(不仅是数据)吗?

有下图这样一个列表,body中每个单元格里的内容可能是一个span(单行数据),可能是一个ul>li(对象或多行数据,比如班级),甚至最后一个操作列里面可能是select>option,总之是未知的一个组件或html字符串。

那么我在写vue单元格组件的时候,希望外界能给它传递一些组件供其渲染数据。而单元格事先并不知道我要给它传什么组件(保持组件干净,它只按指定字段接收组件),这种情况下,这个单元格组件怎么写呢?

具体一点就是:怎么让一个组件接收 未知组件或html字符串 并渲染(重点在于如何渲染,现在TableViewCell的prop中已经可以接收到了DropDown组件对象) 呢?

在react中这种情况比较好处理,虚拟dom加上去就可以了,但是vue中,模板是模板,js是js,处理起来有点棘手。

目前项目中组件的层级关系是:

(特定页面)TaskPage -> 传递数据 及 特定数据下在td标签中的渲染组件,比如传递一个DropDown组件
    (公共组件)TableView
        (公共组件)TableViewCell(其实就是一个td标签,把传过来的DropDown组件渲染进td)

自定义指令啊


组件传递组件完全没必要,你传递的是Vue组件,vue组件就是一个对象,一个实例,那么你还不如把你创建的参数传过去,到那边组装。但我看你的描述,觉得你把简单项目复杂化了,你先理清思路,做好设计。
如果你需要组件之间共享数据,可以使用vuex。

html字符串本来就是vue对象里的el,你为何不直接放子组件里进行if控制呢


个人认为父组件给子组件传递组件是完全没有必要的

如果在表格父组件中你想根据不同的内容来渲染不同的td,你完全可以写多个不同类型的子组件td,并且在父组件中根据一定的条件来选择加载何种类型的子组件td即可。不需要使用到从父组件传递到子组件这种方式。

不知我表述的是否清楚。


既然楼主坚持,我花了一些事件尝试实践了一下,似乎可行:
https://github.com/JasonKid/v...

PS: 但是这种实现方式无法任意改变被传递的组件,因为是在子组件中的created中初始化了组件。

代码写的有点快比较粗糙请谅解

【热门文章】
【热门文章】