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

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

主要有三种操作方式：

默认插槽

具名插槽

作用域插槽

默认插槽

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

// 父组件

// 子组件

我是作用域插槽的子组件

默认内容

具名插槽

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

// 父组件

父组件header内容

父组件footer内容

// 子组件

我是作用域插槽的子组件

作用域插槽

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

// 父组件

// 子组件

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

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

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

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

// 父组件

// 子组件

// 子组件js

mounted () {

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

if (!dom) {

console.log('有内容')

} else {

console.log('无内容')

}

vue插槽面试题_Vue 的slot插槽及一个奇怪的面试题相关推荐

前端学习（2716）：重读vue电商网站36之slot插槽使用
项目需求:由于用户列表状态后台返回的是 true/false,无法进行渲染,而我们需要的是有一个Switch开关来控制我们的状态.添加一个template 模板后,此时就可以用 slot-scope ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
前端框架Vue：组件之间的通信、插槽的使用
Vue组件与插槽一.组件化开发思想组件化规范 Web Components 我们希望尽可能多的重用的代码自定义组件的方式不太容易(html,js ,css) 多次使用组件可能导致冲突二.组件注 ...
vite+vue3使用slot插槽
如何简单明了使用slot插槽在官网已经表明如何使用,但我觉得看的有点小乱,本文章记录一下,也是整理自己的思路使用solt的理由:在不同的组件使用,它最核心的地方展示是不一样的,但其它的地方是一样的 ...
细致讲解slot插槽的使用
1.什么是插槽 VUE官方文档的解释: Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口. 个人理解: 插槽实质是对子组件的扩展,通过<slot&g ...
vue中slot（插槽）详解，slot、slot-scope和v-slot
slot是什么 slot,也称插槽,可以类比为插卡式的FC游戏机,游戏机(子组件)暴露卡槽(插槽)让用户插入不同的游戏磁条(自定义内容),游戏机会读取并加载磁条里的游戏 Vue的slot,是组件的一块 ...
Vue 中 slot插槽的使用
Vue 中 slot插槽的使用插槽就是子组件提供给父组件使用的一个占位符,用<slot></slot>表示, 父组件可以在这个占位符填充任何模板代码,如HTML.组件等,填 ...
vue slot scope使用_20、slot插槽的用法
重点: 单个插槽.具名插槽.作用域插槽的用法: 访问插槽的方法. 其实本小白对插槽理解的还不深,哪些场景会经常用到插槽也不了解. 但是本着"大胆猜测"的理念,我的猜测如下: 假设有 ...
vue设置标签自定义属性_Vue组件化开发之插槽
插槽为组件提供了强大的扩展能力.我们可以把电脑的主板理解为一个已经封装好的组件,主板上都会预留各种插槽,我们可以往插槽中插入内存条.显卡.声卡等设备.基于同样的思想,Vue在封装组件时,也可以预留插槽 ...

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

vue插槽面试题_Vue 的slot插槽及一个奇怪的面试题相关推荐

最新文章

热门文章

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

vue插槽面试题_Vue 的slot插槽 及一个奇怪的面试题相关推荐

最新文章

热门文章

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

vue插槽面试题_Vue 的slot插槽及一个奇怪的面试题相关推荐