Vue难点1-作用域插槽详解

客官°小女子只卖身不卖艺 2022-03-22 02:30 182阅读 0赞

首先，定义一个组件

需要在子组件中循环显示一个列表

但是，当我们希望li 的样式由外部使用组件的地方定义，因为可能有多种地方要使用该组件，但样式希望不一样。那么，需要把li 改为slot 。

<div id="root">
      <child>
        <template slot-scope="props">
          <li>{
       {props.item}} - hello</li>
        </template>
      </child>
    </div>
    <script>
    
      Vue.component('child', {
        data: function() {
          return {
            list: ['PHP', 'MySql', 'JavaScript', 'HTML', 'CSS']
          }
        },
          template: `
          <div>
            <ul>
              <slot v-for="item of list" :item=item></slot>
            </ul>
          </div>
      `
      })
    
      new Vue({
        el: '#root',
      })
    </script>

**作用域插槽，使用场景： 子组件做循环显示，或者子组件的某一部分由外部指定的时候，就使用作用域插槽。**

转：[https://blog.csdn.net/purple\_lumpy/article/details/83098768][https_blog.csdn.net_purple_lumpy_article_details_83098768]

[https_blog.csdn.net_purple_lumpy_article_details_83098768]: https://blog.csdn.net/purple_lumpy/article/details/83098768