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>
巴特西

vue学习17-插槽作用域

最新文章

热门文章
