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

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

主要有三种操作方式：

默认插槽

具名插槽

作用域插槽

默认插槽

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

// 父组件

{{msg}}

// 子组件

我是作用域插槽的子组件

默认内容

具名插槽

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

// 父组件

父组件header内容

父组件footer内容

// 子组件

我是作用域插槽的子组件

作用域插槽

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

// 父组件

{{item}}

// 子组件

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

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

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

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

// 父组件

{{msg}}

// 子组件

// 子组件js

mounted () {

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

if (!dom) {

console.log('有内容')

} else {

console.log('无内容')

}

},