vuejs学习2.8 语法——组件化开发3——插槽与前端模块化

插槽

插槽的基本使用

将按钮替换到组件中的插槽中，如果没有命名，就会将所有都替换到所有没有名字的插槽中

  按钮2
  

具名插槽的使用

插槽用name来命名，替换时用< template v-slot:center>（v-slot:的语法糖是#）

作用域插槽

在组件插槽中定义 :data=“pLanguages” ，然后在替换插槽时获取组件数据#default=“slotProps”，slotProps.data就是所用数据（注意data，slotProps可以自己命名）

前端模块化

ES5没有模块化，可能导致变量命名冲突，函数命名冲突问题，导致灾难，另外这种代码的编码方式对js依赖顺序几乎是强制性的
ES5可以通过闭包函数来解决命名冲突问题，但是无法复用代码

(function () {
  var name="小明";
  var age="12";
  console.log(age);
})()

ES5中的模块化实现方法

var moduleA = (function () {
  var obj = {}
  var flag = false
  function sum(num1,num2) {
    return num1+num2
  }

  obj.flag = flag
  obj.sum = sum

  return obj
})()

其他的js文件可以直接moduleA.flag来实现复用

常用的模块化规范：CommonJs，AMD，CMD，ES6的Module

CommonJs（需要node环境才能实现）

导出语法：

module.exports = {
  flag,
  sum,
}

导入语法：

var {flag,sum} = require('./bbb.js')
//或者
var aaa = require('./bbb.js')
var flag = aaa.flag;

ES6模块化（type=“module” export和import）

使用 type=“module” 来实现模块化，表示每个js为一个模块

导出语法

let flag = true;
let age = 16;
export {
   flag,
    age,
}

直接定义时候导出

export let sex = "男";

export function sum(num1,num2) {
  return num1+num2
}

export class Person {
  constructor(name,age) {
    this.name = name;
    this.age = age;
  }
  run(){
    console.log(this.name);
  }
}

导入语法

直接使用export时，导入时名字不能改变

import {sum,Person} from "./bbb.js"

使用default

一个js只能有一个默认的导出，

export default {
   flag
}

在导入时名字可以自己命名，且不需要括号，表示导入默认

import flag2 from "./bbb.js"

使用全部导入

在导入比较多时

import *as abc from "./bbb.js"
console.log(abc.flag);