4. Vue 作用域插槽

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',
  })