vue官网api:
插槽:
jsx:
说明: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> ); } }} />
结果:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论