vue插槽（slot）的模板与JSX写法

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

父组件：parent.vue

结果：

 

 

 二、插槽传值JSX写法

子组件：child.jsx

export default {
    data() {
        return {
            info: {
                title: "标题一"
            },
            info2: {
                title: "标题二"
            }
        };
    },
    render() {
        return (
            

                {this.$scopedSlots.default({
                    info: this.info
                })}

                {this.$scopedSlots.other({
                    info: this.info2
                })}
            
        );
    }
};

父组件：parent.jsx

 {
            return (
                

                    {props.info.title}
                
            );
        },
        other: props => {
            return (
                

                    {props.info.title}
                
            );
        }
    }}
/>

结果：

 转自https://www.cnblogs.com/ccyinghua/p/12174699.html