个人自学前端29-Vue6-插槽

目录

一.插槽

如何在同一个组件复用多次时,渲染不同的标签?
可以使用插槽来实现.

要使用插槽,组件挂载必须使用双标签.
子组件中,通过内置组件slot来引入插槽.
组件插槽最终会替换slot组件.

1. 默认插槽

  <script>
    // 以下的插槽是默认插槽.
    // 默认插槽可以是多个标签.
    const box = {
      template: `
        <div>
          <h3>{{title}}</h3>
          <p>大家都好</p>
          <slot />
        </div>
      `,
      props: ['title']
    }
    const App = {
      template: `
        <div>
          <box title='你好'>
            <button>按钮111</button>
            <button>按钮222</button>
          </box>
          <box title='他好'>
            <span>span</span>
          </box>
          <box title='我好'>
            <a href='#'>百度一下</a>
          </box>
        </div>
      `,
      components: { box }
    }
    new Vue({
      el: '#app',
      render: h => h(App)
    })
  </script>

2. 具名插槽

具名插槽 => 具有name属性命名的插槽。插槽内容需要通过slot来对应name属性.
具名插槽可以一对多.
如果要一对多,可以用template抽象组件包裹所有的插槽内容.然后给template组件设置slot.

template内置的抽象组件 => 最终不会渲染到页面上. => 只能在插槽中使用.
如果多个组件的模板多数类似,少数不一致,就可以使用插槽来复用组件.

  <script src="js/vue.js"></script>
  <script>
    const box = {
      template: `
        <div>
          <slot name='a' />
          <h3>{{title}}</h3>
          <slot name='span' />
          <slot name='btn2' />
          <p>大家都好</p>
          <slot name='btn1' />
        </div>
      `,
      props: ['title']
    }
    const App = {
      template: `
        <div>
          <box title='你好'>
            <button slot='btn1'>按钮1111</button>
            <button slot='btn2'>按钮2222</button>
          </box>
          <box title='他好'>
            <template slot='span'>
              <span>span</span>
              <span>span</span>
            </template>
          </box>
          <box title='我好'>
            <a href='#' slot='a'>百度一下</a>
          </box>
        </div>
      `,
      components: { box }
    }
    new Vue({
      el: '#app',
      render: h => h(App)
    })
  </script>

3. 作用域插槽

什么情况下用作用域插槽?
插槽内容中包含子组件数据时,就得用作用域插槽.

作用域插槽内有子组件数据,但是默认却在父组件上找数据,找不到会报错.

可以通过给组件添加一个v-slot指令,这样组件内部就构成了一个作用域。
插槽内部的数据,会优先在作用域内查找.
v-slot的值,默认是一个对象,这个对象的名字可以任意书写
这个对象就能获取到slot组件上的所有绑定数据.

v-slot支持解构赋值的写法.

  <script>
    const box1 = {
      template: `
        <div>
          <table border='1' cellspacing='10' cellpadding='10'>
            <tr v-for='({name,age,sex,nation}) in arr'>
              <td>{{name}}</td>
              <td>{{age}}</td>
              <td>{{sex}}</td>
              <slot :nation='nation' a='100' c='200' />
            </tr>
          </table>
        </div>
      `,
      data() {
        return {
          arr: [
            {
              name: '幂幂',
              age: 32,
              sex: '女',
              nation: '汉'
            }, {
              name: '超越',
              age: 23,
              sex: '女',
              nation: '苗'
            }, {
              name: '德刚',
              age: 65,
              sex: '男',
              nation: '蒙古'
            }
          ]
        }
      }
    }
    const App = {
      template: `
        <div>
          <box1></box1>
          <box1 v-slot='{nation}'>
            <td>{{nation}}</td>
          </box1>
        </div>
      `,
      components: { box1 }
    }
    new Vue({
      el: '#app',
      render: h => h(App)
    })
  </script>

如果在组件上使用v-slot,则默认只能获取到默认插槽的绑定数据。
如果是具名插槽,就不能再组件上使用v-slot指令.

需要在template组件上使用 => v-slot:插槽名

  <script>
    const box1 = {
      template: `
        <div>
          <table border='1' cellspacing='10' cellpadding='10'>
            <thead>
              <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <slot name='c'></slot>
              </tr>
            </thead>
            <tr v-for='({name,age,sex,nation,marryed}) in arr'>
              <td>{{name}}</td>
              <td>{{age}}</td>
              <td>{{sex}}</td>
              <slot name='a' :marryed='marryed' />
              <slot name='b' :nation='nation'/>
            </tr>
          </table>
        </div>
      `,
      data() {
        return {
          arr: [
            {
              name: '幂幂',
              age: 32,
              sex: '女',
              nation: '汉',
              marryed: '已离异'
            }, {
              name: '超越',
              age: 23,
              sex: '女',
              nation: '苗',
              marryed: '未婚'
            }, {
              name: '德刚',
              age: 65,
              sex: '男',
              nation: '蒙古',
              marryed: '已婚'
            }
          ]
        }
      }
    }
    const App = {
      template: `
        <div>
          <box1>
            <th slot='c'>婚姻状况</th>
            <template v-slot:a='{marryed}' slot='a'>
              <td>{{marryed}}</td>
            </template>
          </box1>
          <box1>
            <th slot='c'>民族</th>
            <template v-slot:b='{nation}' slot='b'>
              <td>{{nation}}</td>
            </template>
          </box1>
        </div>
      `,
      components: { box1 }
    }
    new Vue({
      el: '#app',
      render: h => h(App)
    })
  </script>
上一篇:C语言每日一练——第29天:兔子繁衍问题


下一篇:【SRX】RE与PFE策略不同步,导致Commit失败-----案例分析