插槽与前端模块化
插槽
插槽的基本使用
将按钮替换到组件中的插槽中,如果没有命名,就会将所有都替换到所有没有名字的插槽中
<div id="app">
<cpn><button>按钮2</button></cpn>
<cpn></cpn>
</div>
<template id="cpn">
<div>
<h2>我是组件</h2>
<!--插槽的基本使用-->
<slot></slot>
<!--表示默认值-->
<slot><button>按钮</button></slot>
<!--如果有多个值同时放在一个插槽中,一起作为替换元素-->
</div>
</template>
具名插槽的使用
插槽用name来命名,替换时用< template v-slot:center>(v-slot:的语法糖是#)
<div id="app">
<cpn>
<template v-slot:center>
<h2>我替换了中间的</h2>
</template>
<template #right>
<h2>我替换了右边的</h2>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<slot name="left"><span>左边的</span></slot>
<slot name="center"><span>中间的</span></slot>
<slot name="right"><span>右边的</span></slot>
</div>
</template>
作用域插槽
在组件插槽中定义 :data=“pLanguages” ,然后在替换插槽时获取组件数据#default=“slotProps”,slotProps.data就是所用数据(注意data,slotProps可以自己命名)
<div id="app">
<cpn></cpn>
<cpn>
<!-- 目的获取子组件的pLanguage-->
<!-- 2.5以后可以用div-->
<template #default="slotProps">
表示用-分隔
<br>
<span>{{slotProps.data.join('-')}}</span>
</template>
</cpn>
<cpn>
<template #default="slotProps">
表示用*分隔
<span v-for="item in slotProps.data">{{item}}*</span>
</template>
</cpn>
</div>
<template id="cpn">
<div>
<!-- //data可以用任何字符串表示,例如: :abc="pLanguage" 上面也需要同样修改-->
<slot :data="pLanguages">
<ul>
<li v-for="item in pLanguages">{{item}}</li>
</ul>
</slot>
</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:"你好",
},
components:{
cpn:{
template:'#cpn',
data(){
return {
pLanguages:['js','python','C','C++',"c#","ts"],
}
}
}
}
})
</script>
前端模块化
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为一个模块
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>
导出语法
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);