vue中,父组件可以向子组件传递一个组件吗
展开全部
最近在做类似的事情,在okoala/vue-antd上学到一个做法。
首先,父组件传入一个`render`函数,用于描述要动态生成的子组件。相关代码如下:
const columns = [{
title: '操作',
key: 'operation',
render: (text, record, index) => `<s-button icon="search" @click="view(${index})"></s-button>`
}]
然后,对应的`table`组件中,对相应的`render`使用`$compile`进行渲染,并插入到相应的位置。这里需要注意的是编译作用域,需要使用父组件来编译,否则无法绑定父组件的事件。相关代码如下:
if (render) {
const $td = $tr.children[j]
const value = this.dataSource[i]
const template = render(value[dataIndex], value, i)
const $cell = document.createElement('div')
$cell.innerHTML = template
this.$parent.$compile($cell)
$td.appendChild($cell)
}
首先,父组件传入一个`render`函数,用于描述要动态生成的子组件。相关代码如下:
const columns = [{
title: '操作',
key: 'operation',
render: (text, record, index) => `<s-button icon="search" @click="view(${index})"></s-button>`
}]
然后,对应的`table`组件中,对相应的`render`使用`$compile`进行渲染,并插入到相应的位置。这里需要注意的是编译作用域,需要使用父组件来编译,否则无法绑定父组件的事件。相关代码如下:
if (render) {
const $td = $tr.children[j]
const value = this.dataSource[i]
const template = render(value[dataIndex], value, i)
const $cell = document.createElement('div')
$cell.innerHTML = template
this.$parent.$compile($cell)
$td.appendChild($cell)
}
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询