vue_使用slot插槽 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h3>vue中使用插槽</h3>
    
    <child>
      <!-- 插槽语法 -->
      <!-- v-slot只能用在template标签上,而且还会改变dom渲染结构 -->
      <!-- <template v-slot="header">
        <p class="header" >header content</p>
      </template> -->
      <p class="header" slot="header">header content</p>
      <p class="footer" slot="footer">footer content</p>
    </child>
    ---------------------------
    <child></child>
  </div>
</body>
<script type="text/javascript">
  Vue.component('child', {
    template: `
      <div>
        <slot name="header">默认内容</slot>
        <slot>默认内容</slot>
        <slot name="footer">默认内容</slot>
      </div>
    `
  })
  let vm = new Vue({
    el: '#app'
  })
</script>
</html>

 

posted @ 2020-03-05 16:41  前端之旅  阅读(170)  评论(0)    收藏  举报