【Vue基础知识总结 8】插槽slot与vue导入导出(2)

浏览器显示

四、作用域

---

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

我是子组件

我是内容, 哈哈哈

按钮

浏览器显示

五、作用域插槽

---

父组件替换插槽的标签，但是内容由子组件来提供。

1、代码实例

{{slot.data.join(’ - ')}}

{{slot.data.join(’ * ')}}

• {{item}}

• 2、浏览器显示

  

  六、前端代码复杂带来的问题

  ---

  1、js脚本语言

  在网页开发的早期，js只作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的。

  2、前后端分离开发

  随着Ajax异步请求的出现，慢慢形成了前后端分离开发

  客户端需要完成的事情越来越多，代码量与日俱增；

  为了应对代码量的剧增，通常会将代码组织在多个js文件中；

  但是这种维护方式，依然不能避免一些灾难性的问题；

  比如全局变量同名的问题。

  这种代码的编写方式对js文件的依赖顺序几乎是强制性的。

  但是js文件过多，比如几十个的时候，弄清楚他们的顺序是一件比较困难的事情；

  而且即使你弄清楚了，也不能避免上面出现的这种问题的发生。

  3、匿名函数的解决方案

  我们可以使用匿名函数来解决重名的问题

  (function(){

  var flag = true

  })()

  但是如果我们希望在其他js中使用flag，应该如何处理？

  很显然，在其他js中不容易使用，因为flag是一个局部变量。

  此时，我们可以将需要暴露到外面的变量，使用一个模块作为出口。

  1. 在匿名函数内部，定义一个对象；

  2. 给对象添加各种需要暴露到外面的属性和方法；

  3. 最后将这个对象返回，并且在外面使用了一个ModuleA接收。

  var ModuleA = (function(){

  //定义一个对象

  var obj = {}

  //在对象内部添加变量和方法

  obj.flag = true

  obj.myFunc = function(info){

  console.log(info)

  }

  //将对象返回

  return obj

  })()

  if(moduleA.flag){

  console.log(“哪吒是一个博客专家”)

  }

  moduleA.myFunc(“哪吒是一个全栈工程师”)

  4、常见的模块化规范

  CommonJS、AMD、CMD、ES的Modules

  七、CommonJS

  ---

  模块化的两大核心：导入和导出

  1、CommonJS导出

  module.exports = {

  flag: true,

  test(a,b){

  return a + b

  }

  demo(a,b){

  return a * b

  }

  }

  2、CommonJS导入

  //CommonJS模块

  let { test,demo,flag} = require(‘moduleA’)

  //等同于

  let _mA = require(‘moduleA’)

  let test = _mA.test

  let demo= _mA.demo

  let flag = _mA.flag

  八、ES6导入导出

  ---

  1、index.html

  2、aaa.js

  var name = ‘小明’

  var age = 18

  var flag = true

  function sum(num1, num2) {

  return num1 + num2

  }

  if (flag) {

  console.log(sum(20, 30));

  }

  // 1.导出方式一:

  export {

  flag, sum

  }

  // 2.导出方式二:

  export var num1 = 1000;

  export var height = 1.88

  // 3.导出函数/类

  export function mul(num1, num2) {

  return num1 * num2

  }

  export class Person {

  run() {

  console.log(‘在奔跑’);

  }

  }

  3、bbb.js

  import {sum} from ‘./aaa.js’

  var name = ‘小红’

  var flag = false

  console.log(sum(100, 200));

  4、mmm.js

  // 1.导入的{}中定义的变量

  import {flag, sum} from “./aaa.js”;

  if (flag) {

  console.log(‘小明是天才, 哈哈哈’);

  console.log(sum(20, 30));

  }

  // 2.直接导入export定义的变量

  import {num1, height} from “./aaa.js”;

  console.log(num1);

  console.log(height);

  // 3.导入 export的function/class

  import {mul, Person} from “./aaa.js”;

  console.log(mul(30, 50));

  const p = new Person();

  p.run()

  // 4.导入 export default中的内容

  import addr from “./aaa.js”;

  addr(‘你好啊’);

  // 5.统一全部导入

  // import {flag, num, num1, height, Person, mul, sum} from “./aaa.js”;

  import * as aaa from ‘./aaa.js’

  console.log(aaa.flag);

  console.log(aaa.height);

  🍅 Java学习路线：搬砖工逆袭Java架构师

  🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪

  🍅 扫描主页左侧二维码，加入群聊，一起学习、一起进步

  🍅 欢迎点赞 👍 收藏 ⭐留言 📝

  往期精彩回顾

  【Vue基础知识总结 1】Vue入门

  自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

  深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

  因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

  

  

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  资料领取方式：点击这里免费领取前端全套学习资料

  

  
  片转存中…(img-LNqKjg3X-1713614713804)]

  [外链图片转存中…(img-FHjNojpX-1713614713805)]

  既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

  [外链图片转存中…(img-1dZjp7RH-1713614713805)]

  由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

  如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

  [外链图片转存中…(img-XFq4DeYf-1713614713805)]

  最后

  javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

  资料领取方式：点击这里免费领取前端全套学习资料

  [外链图片转存中…(img-8NMZYfkR-1713614713806)]

  [外链图片转存中…(img-IkvhbTmz-1713614713806)]