vue中的作用域插槽

  • 现在我的slot组件携带了它自己得属性,如果我外面直接使用,那会把这些属性全部干掉。我想把他们取出来怎么办?需要用到作用域插槽
  • 给这里需要取出slot中属性值得标签(也就是p)定义一个属性:slot-scope,它的值是一个对象,这个对象中保存的有下面slot中所有得属性
  <div id="app">
    <index>
      <p slot-scope="obj">{{obj.company}}----->{{obj.title}}----->{{obj.$index}}</p>
    </index>
  </div>
  <script>
    Vue.component('index',{
      template: `
          <div>
            index
            <slot title="这是title" company="这是company" $index="这是$index"></slot>
          </div>
        `
    })
    let vm = new Vue({
      el:'#app',
      data:{

      }
    })
  </script>

显示结果:

原文地址:https://www.cnblogs.com/mushitianya/p/10515782.html