vue学习17-插槽作用域 

<!DOCTYPE html>
<html lang='en'>
<head>
 <meta charset='UTF-8'>
 <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 <script src='https://unpkg.com/vue/dist/vue.js'></script>
 <title></title>
</head>
<body>
 <div id='app'>
    <container>
      <template v-slot:header="headerProps">
      {{headerProps.navs}}
      </template>
    </container>
 </div>
 <script>
    Vue.component("container",{
      template:`
      <div>
        <div class="header">
        <slot name="header" :navs="navs"></slot>
        </div>
      </div>
      `,
      data : function(){
        return {
          navs:['你','我','他']
        }
      }
    },)
     

    new Vue({
     el:'#app',
     data:{
     }
   }
)
</script>
</body>
</html>

　　

posted @ 2021-12-31 16:18  空谷近心  阅读(25)  评论(0)    收藏  举报