vuejs 插槽和作用域插槽

1.简单插槽

简单来说：组件最外层的html是一样的，里面的内容随便你填写。<slot></slot>（此标签是必须写的）对应的是Your Profile内容，或者你想填的任何内容

.html代码

<div id="components-demo">
    <navigation-link url="/profile">
      Your Profile
    </navigation-link>
</div>

.js代码

Vue.component('navigation-link', {
  props:["url"],
  template: `
    <a
        v-bind:href="url"
        class="nav-link">
        <slot></slot>
    </a>
  `
})

new Vue({
  el: '#components-demo'
 })

结果如下图

vuejs 插槽和作用域插槽

2.作用域插槽

简单来说，如果你想要组件循环出不一样的html，你就可以用作用域插槽来实现。其中slot-scope 对应的就是js中的slot标签内容

.html代码

  <div id="components-demo">
      <my-list title="形状" :items="shapes">
          <div slot-scope="vv">{{vv.name}}<small>（{{vv.sides}}条边）</small></div>
      </my-list>

      <my-list title="颜色" :items="colors">
          <div slot-scope="ad">
              <div class="colorbox" :style="{background:ad.hex}">{{ad.name}}</div>
          </div>
      </my-list>

    </div>

.js代码

Vue.component('my-list', {
  props:["title","items"],
  template: `
  <div class="my-list">
              <h3 class="title">{{title}}</h3>
              <div class="list">
                  <slot v-bind="item" v-for="item in items"></slot>
              </div>
          </div>
  `
})

new Vue({
  el: '#components-demo',
  data:{
      shapes:[{ name:'正方形', sides:4},{ name:'六边形', sides:6},{ name:'三角形', sides:3}],
      colors:[{ name: '黄色', hex: '#f4d03f' },{ name: '绿色', hex: '#229954' },{ name: '紫色', hex: '#9b59b6' }]
    }
 })

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

https://www.w3cplus.com/vue/vue-js-scoped-slots.html 此网站的作者将的更为详细

vuejs 插槽和作用域插槽

相关推荐