vue2 插槽 父组件如何只对个别字段处理 其它使用子组件的默认值?
子组件
<template slot-scope="scope"> // 父组件使用这个插槽时 有个if判断 只针对个别字段(列)处理; 其它字段（列）使用下方的默认值
<slot name="bodyCell" :column="column" :record="scope.row">
</slot>
<slot>{{ scope.row[column.prop] }}</div>
</template>
父组件
<Child>
<template slot="bodyCell" slot-scope="{column, record}">
<template v-if="column.prop == '表格的第一列'">
// 只对个别字段处理，不符合条件的 使用子组件的<slot>默认值
// ...
</template>
</template>
</Child>
回答：
两种解决方案：
1.去掉默认插槽，控制权全部交给bodyCell
子组件
// 只保留bodyCell插槽<template slot-scope="scope">
<slot name="bodyCell" :column="column" :record="scope.row" />
</template>
父组件
<Child> <template slot="bodyCell" slot-scope="{column, record}">
<template v-if="column.prop == '表格的第一列'">
// 符合条件
</template>
<template v-else>
// 默认的
</template>
</template>
</Child>
2.或者在子组件处理好默认值
子组件
<template> <div class="child">
<slot name="bodyCell" :column="column" :record="row">
<span>默认插槽</span>
</slot>
</div>
</template>
<script>
export default {
name: "Child",
props: {},
data() {
return {
column: {
prop: "表格的第一列"
},
row: {
name: "child",
prop: "child-component"
}
};
}
};
</script>
父组件
<template> <div id="app">
<Child>
<template #bodyCell="{ column }">
<template v-if="column.prop === '表格的第一列'">
<span>传入的插槽</span>
</template>
</template>
</Child>
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
name: "App",
components: {
Child,
},
};
</script>
修改一下 column 的值
子组件
<template> <div class="child">
<slot name="bodyCell" :column="column" :record="row">
<span>默认插槽</span>
</slot>
</div>
</template>
<script>
export default {
name: "Child",
props: {},
data() {
return {
column: {
prop: "表格的第二列"
},
row: {
name: "child",
prop: "child-component"
}
};
}
};
</script>
以上是 vue2 插槽 父组件如何只对个别字段处理 其它使用子组件的默认值? 的全部内容， 来源链接： utcz.com/p/933818.html
