vue作用域插槽，使用子的值

最新推荐文章于 2024-06-01 21:30:25 发布

原创最新推荐文章于 2024-06-01 21:30:25 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

13 篇文章

订阅专栏

<!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>