demo/深入组件/2.4-插槽-作用域插槽.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script src="../vue.js"></script>
</head>
<body>
<div id="dynamic-component-demo">
    <current-user>
        <template v-slot:default="slotProps">
            {{ slotProps.user.firstName }}
        </template>
    </current-user>
</div>

<script>
    Vue.component('current-user', {
        data:function(){
            return {
                user: {
                    firstName: 'cc',
                    lastName:'sx'
                }
            }
        },
        template: `
            <span>
              <slot v-bind:user="user">
                  {{user.lastName}}
              </slot>
            </span>
          `
    })

    new Vue({
        el: "#dynamic-component-demo",
    });
</script>
</body>
</html>