vue学习16-插槽的使用

<!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'>
  <nav-link url = "https://www.baidu.com" v-slot:chacao>百度</nav-link>
  <nav-link url = "https://www.baidu.com" >百度2222</nav-link>


 </div>
 <script>
   Vue.component("nav-link",{
    props:['url'],
    template:`
      <a :href="url">
      <slot name="chacao"></slot>
      <slot></slot>

      </a>

    `
   }),
    new Vue({
     el:'#app',
     data:{}
   }
)
</script>
</body>
</html>
posted @ 2021-12-31 13:48  空谷近心  阅读(24)  评论(0)    收藏  举报