模板写法和render写法实现父组件获取子组件插槽中的数据
子组件children.vue
1 <template> 2 <div> 3 <div :key="$index" v-for="(item, $index) in list"> 4 <slot name="header" :item="item" 5 ><div style="text-align: left">编号 {{ item.id }} 的标题</div></slot 6 > 7 <slot :item="item"> 8 <div style="text-align: left">编号 {{ item.id }} 的默认内容</div></slot 9 > 10 </div> 11 </div> 12 </template> 13 14 15 <script> 16 export default { 17 data() { 18 return { 19 list: [ 20 { id: 1, header: "11111" }, 21 { id: 2, header: "2222222" }, 22 ], 23 }; 24 }, 25 }; 26 </script>
App.vue
1 <template> 2 <div id="app"> 3 <h1>模板写法：</h1> 4 <children> 5 <template #default="props" 6 >编号 {{ props.item.id }} 这是自定义的内容</template 7 > 8 </children> 9 <h1>render 写法：</h1> 10 <h3>如何自定义父级内容？？？？</h3> 11 <main111></main111> 12 </div> 13 </template> 14 15 <script> 16 import Vue from "vue"; 17 import children from "./components/children"; 18 Vue.component("main111", { 19 render(h) { 20 return h(children, { 21 scopedSlots: { 22 default: function (props) { 23 return h("span", `编号 ${props.item.id} 这是自定义的内容`); 24 }, 25 }, 26 }); 27 }, 28 }); 29 30 export default { 31 name: "App", 32 components: { 33 children, 34 }, 35 }; 36 </script> 37 38 <style> 39 #app { 40 font-family: "Avenir", Helvetica, Arial, sans-serif; 41 -webkit-font-smoothing: antialiased; 42 -moz-osx-font-smoothing: grayscale; 43 text-align: center; 44 color: #2c3e50; 45 margin-top: 60px; 46 } 47 </style>
显示效果是一样的：
调试的codesnabox地址：https://codesandbox.io/s/old-bash-ok6hu?file=/src/App.vue
