Vue 插槽(slot)使用

1 为什么使用slot

组件的插槽

• 组件的插槽是为了让我们封装的组件更加具有扩展性。
• 让使用者可以决定组件内部一些内容到底展示了什么。

举例：

• 移动开发中，几乎每个页面都有导航栏
• 导航栏我们会分装成一个插件，比如nav-bar组件
• 一旦有了这个组件，我们就可以在多个页面中复用了

!--
1. 插槽的基本使用 slot>
    /slot>
    
2.插槽的默认值：slot>
    button/slot>
    
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
    

div id="app">
    
    cpn>
    button>
    按钮/button>
    /cpn>
    
    cpn>
    /cpn>
    
    cpn>
    span>
    标签/span>
    /cpn>
    
/div>
    

template id="cpn">
    
    div>
    
        h2>
    我是组件/h2>
    
        p>
    666/p>
    
        slot>
    button>
    默认为按钮/button>
    /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn'
      }

    }

  }
    )
/script>
    

2 具名插槽使用（导航）

div id="app">
    
    cpn>
    span slot="center">
    标题/span>
    /cpn>
    
    cpn>
    button slot="center">
    标题/button>
    /cpn>
    
/div>
    

template id="cpn">
    
    div>
    
        slot name="left">
    span>
    左边/span>
    /slot>
    
        slot name="center">
    span>
    中间/span>
    /slot>
    
        slot name="right">
    span>
    右边/span>
    /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn'
      }

    }

  }
    )
/script>
    

3 作用域插槽

• 父组件替换插槽的标签，但是内容由子组件来提供

div id="app">
    
    cpn>
    /cpn>
    

    cpn>
    
        !-- 目的是获取子组件中的pLanguages -->
    
        template v-slot="slot">
    
            span v-for="item in slot.data">
{
{
 item }
}
     * /span>
    
        /template>
    
    /cpn>
    

    cpn>
    
        !-- 目的是获取子组件中的pLanguages -->
    
        !-- .join 将数组，转为字符串 -->
    
        template v-slot="slot">
    
            span>
{
{
 slot.data.join(' * ') }
}
    /span>
    
        /template>
    
    /cpn>
    

/div>
    

template id="cpn">
    
    div>
    
        slot :data="pLanguages">
    
            ul>
    
                li v-for="item in pLanguages">
{
{
 item }
}
    /li>
    
            /ul>
    
        /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn',
        data() {

          return {

            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }

        }

      }

    }

  }
    )
/script>
    

仓库地址：## 1 为什么使用slot

组件的插槽

• 组件的插槽是为了让我们封装的组件更加具有扩展性。
• 让使用者可以决定组件内部一些内容到底展示了什么。

举例：

• 移动开发中，几乎每个页面都有导航栏
• 导航栏我们会分装成一个插件，比如nav-bar组件
• 一旦有了这个组件，我们就可以在多个页面中复用了

!--
1. 插槽的基本使用 slot>
    /slot>
    
2.插槽的默认值：slot>
    button/slot>
    
3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素
-->
    

div id="app">
    
    cpn>
    button>
    按钮/button>
    /cpn>
    
    cpn>
    /cpn>
    
    cpn>
    span>
    标签/span>
    /cpn>
    
/div>
    

template id="cpn">
    
    div>
    
        h2>
    我是组件/h2>
    
        p>
    666/p>
    
        slot>
    button>
    默认为按钮/button>
    /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn'
      }

    }

  }
    )
/script>
    

2 具名插槽使用（导航）

div id="app">
    
    cpn>
    span slot="center">
    标题/span>
    /cpn>
    
    cpn>
    button slot="center">
    标题/button>
    /cpn>
    
/div>
    

template id="cpn">
    
    div>
    
        slot name="left">
    span>
    左边/span>
    /slot>
    
        slot name="center">
    span>
    中间/span>
    /slot>
    
        slot name="right">
    span>
    右边/span>
    /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn'
      }

    }

  }
    )
/script>
    

3 作用域插槽

• 父组件替换插槽的标签，但是内容由子组件来提供

div id="app">
    
    cpn>
    /cpn>
    

    cpn>
    
        !-- 目的是获取子组件中的pLanguages -->
    
        template v-slot="slot">
    
            span v-for="item in slot.data">
{
{
 item }
}
     * /span>
    
        /template>
    
    /cpn>
    

    cpn>
    
        !-- 目的是获取子组件中的pLanguages -->
    
        !-- .join 将数组，转为字符串 -->
    
        template v-slot="slot">
    
            span>
{
{
 slot.data.join(' * ') }
}
    /span>
    
        /template>
    
    /cpn>
    

/div>
    

template id="cpn">
    
    div>
    
        slot :data="pLanguages">
    
            ul>
    
                li v-for="item in pLanguages">
{
{
 item }
}
    /li>
    
            /ul>
    
        /slot>
    
    /div>
    
/template>
    

script src="../js/vue.js">
    /script>
    
script>

  const app = new Vue({

    el: '#app',
    data: {

      message: "你好，有勇气的牛排"
    }
,
    components: {

      cpn: {

        template: '#cpn',
        data() {

          return {

            pLanguages: ['JavaScript', 'C++', 'Java', 'C#', 'Python']
          }

        }

      }

    }

  }
    )
/script>
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！