Vue 作用域插槽
-
作用域插槽可在数据渲染时,父组件调用子组件数据进行重新排版渲染。
<div id="app"> <current-user v-slot:default="slotProps"> {{ slotProps.user.firstName }} </current-user> <current-user></current-user> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue.component('current-user', { data: function(){ return { user:{ firstName:'罗', lastName:'永浩' } } }, template:` <span> <slot :user="user">{{ user.lastName }}</slot> </span> ` }) app = new Vue({ el: '#app', })