vue官网API:

插槽：https://cn.vuejs.org/v2/guide/components-slots.html

JSX：https://cn.vuejs.org/v2/guide/render-function.html

说明：vue版本2.6.0以上语法

一、插槽模板传值

子组件：child.vue

<template> <div> <!-- 默认插槽 --> <slot :info="info"></slot> <!-- other插槽 --> <slot name="other" :info="info2"></slot> </div></template><script>export default { data() { return { info: { title: "标题一" }, info2: { title: "标题二" } }; }};</script>

父组件：parent.vue

<child> <template v-slot:default="slotProps"> <div> {{ slotProps.info.title }} </div> </template> <template v-slot:other="slotProps"> <div> {{ slotProps.info.title }} </div> </template></child>

结果：

 二、插槽传值JSX写法

子组件：child.jsx

export default { data() { return { info: { title: "标题一" }, info2: { title: "标题二" } }; }, render() { return ( <div> {this.$scopedSlots.default({ info: this.info })} {this.$scopedSlots.other({ info: this.info2 })} </div> ); }};

父组件：parent.jsx

<child scopedSlots={{ default: props => { return ( <div style="line-height: 30px;"> {props.info.title} </div> ); }, other: props => { return ( <div style="line-height: 30px;"> {props.info.title} </div> ); } }}/>

结果：