vue作用域插槽,父使用子的数据

129 阅读1分钟
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue.js"></script>
</head>
<body>
<div id="app">
    <tt>
        <template v-slot:default="like">{{like.user.lastName}}</template>
    </tt>
</div>
 
<script>
    Vue.component('tt', {
      data: function(){
        return {
          user: {
            firstName: '张',
            lastName: '起 灵'
          }
        }
    },
      template: `
        <div>
           <slot v-bind:user="user">{{user.firstName}}</slot>
        </div>
      `
    })
    
    let app = new Vue({
      el: "#app",
      data: {
       
      }
    })
    
    console.log(app.$options.render)
</script>
</body>
</html>

在父组件就使用 v-slot:[slotName]="xx",在父组件就可以直接访问到子组件的data。其它插槽什么的内容官网都有,这一点当时不清楚就做了一个案例。