Wyyyy1024
Wyyyy1024

Vue——插槽、具名插槽、作用域插槽

组件插槽

在组件的使用时传入值通过来传值

插槽的基本使用
1. 插槽位置
Vue.component('alert-box', {
template: `
<div class="demo-alert-box">
<strong>Error!</strong>
<slot></slot>
</div>
`
})
2. 插槽内容
<alert-box>Something bad happened.</alert-box>
具名插槽

有名字的插槽

slot的使用
//slot的使用
<body>
  <div id="app">
    <base-layout>
      <p slot='header'>标题信息p>
      <p>主要内容1p>
      <p>主要内容2p>
      <p slot='footer'>底部信息信息p>
    base-layout>

    <base-layout>
      <template slot='header'>
        <p>标题信息1p>
        <p>标题信息2p>
      template>
      <p>主要内容1p>
      <p>主要内容2p>
      <template slot='footer'>
        <p>底部信息信息1p>
        <p>底部信息信息2p>
      template>
    base-layout>
  div>
  <script type="text/javascript" src="js/vue.js">script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        

          

            
          

          

            
          

          

            
          

        

      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      }
    });
  script>
body>

注意：

  • v-slot指令 是vue2.6.0之后添加的取代了 slot 和 slot-scope
  • slot和slot-scope是被废弃但未被移除的
  • v-slot只能添加在