Vue 的slot插槽 及一个奇怪的面试题

slot 插槽,主要用来做内容分发

主要有三种操作方式:

  • 默认插槽
  • 具名插槽
  • 作用域插槽

默认插槽

没有太多的逻辑,就是把父组件的内容分发到子组件的指定位置

  // 父组件
  <Child>
    <div >{{msg}} </div>
  </Child>

  // 子组件
  <template>
  <div>
      我是作用域插槽的子组件
      <slot >
        <div>默认内容</div>
      </slot>
    </div>
  </template>

具名插槽

这里就是加了一个指向,不同的内容分发到不同的指定位置

  // 父组件
    <Child>
      <template  v-slot:header >
        <div>父组件header内容</div>
      </template>
      <template v-slot:footer >
        <div>父组件footer内容</div>
      </template>
    </Child>
  // 子组件
  <template>
    <div>
      <slot name="header"></slot>
      我是作用域插槽的子组件
      <slot name="footer"></slot>
    </div>
  </template>

作用域插槽

就是将子组件的数据反馈到父组件,父组件对数据进行编辑,然后在插入到子组件指定位置

  // 父组件
    <Child >
      <template slot-scope="data">
        <div>
          <div v-for="item in data.list" :key="item">{{item}}</div>
        </div>
      </template>
    </Child>
  // 子组件
    <slot :list="list"></slot>

面试题:你如何能判断到子组件的插槽是否有内容?

乍一听一脸懵逼,感觉怎么会有这种问题。但是仔细想的话,确实是有这种业务场景的,只是我没有涉及到过。现在想到了一个方法,就是在插槽内定义一个默认dom,如果赋值了,dom就获取不到。

我认为从优先级上讲,是否有内容本身应该在父组件调用插槽的时候判断,因为那时是有原始对象的,当然知道有没有值了。当然,这就要求子组件生产随机id了。

当然,这是我大概找到的思路,因为没有真实的场景,所以暂时想出一个思路,场景是比较单纯的。之后如果遇到真实场景了,再看看这个思路是否可行吧,或者是否有别的办法。

  // 父组件

    <Child &rt;
      <template &rt;
        <div v-if="msg"&rt;
          {{msg}}
        </div&rt;
      </template&rt;
    </Child&rt;
  // 子组件

    <slot &rt;
      <div id="defaultId"&rt;默认内容</div&rt;
    </slot&rt;

  // 子组件js

  mounted () {
    var dom = document.querySelector('#defaultId')

    if (!dom) {
      console.log('有内容')
    } else {
      console.log('无内容')
    }
  },

随机浏览