Vue.js知识——slot插槽、ES6模块化的导入和导出
Vue.js知识
- slot 插槽
-
- 具名插槽
- 编译作用域
- 作用域插槽
- ES6模块化的导入和导出
-
- export使用
-
- export default
- import使用
slot 插槽
什么是slot？
在生活中很多地方都有插槽，电脑的usb，排插当中的电源插槽。
插槽的目的就是让原来的设备具有更多的扩展性，在vue中，组件的插槽也是为了让封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示了什么。
代码演示：此时有一个组件cpn，在vue的实例中使用了4次，但是4次的末尾都要展示不同的标签，如何实现？
源代码：
<body>
<div id="app">
<cpn>cpn>
<cpn>cpn>
<cpn>cpn>
<cpn>cpn>
div>
<template id="cpn">
<div>
<h1>我是组件一h1>
div>
template>
<script>
const app = new Vue({
el:"#app",
components:{
cpn:{
template:"#cpn",
}
}
})
script>
body>
修改之后的代码:
<body>
<div id="app">
<cpn><p>我是p标签p>cpn>
<cpn><span>我是span标签span>cpn>
<cpn><i>我是i标签i>cpn>
<cpn><s>我是s标签s>cpn>
div>
<template id="cpn">
<div>
<h1>我是组件一h1>
<slot>slot>
div>
template>
<script>
const app = new Vue({
el:"#app",
components:{
cpn:{
template:"#cpn",
}
}
})
script>
body>
如果想让slot标签中存有默认值，
只需要在
具名插槽
当组件中拥有多个插槽时，如果想对其中某个特定的插槽进行修改，具需要一种可以标识某个具体的插槽的功能。
<body>
<div id="app">
<cpn>cpn>
div>
<template id="cpn">
<div>
<slot><span>左边的span>slot>
<slot><span>中间的span>slot>
<slot><span>右边的span>slot>
div>
template>
<script>
const app=new Vue({
el:"#app",
components:{
cpn:{
template:"#cpn",
}
}
})
script>
body>
可以给slot标签进行起名。
<template id="cpn">
<div>
<slot name="left"><span>左边的span>slot>
<slot name="center"><span>中间的span>slot>
<slot name="right"><span>右边的span>slot>
div>
template>
在使用组件时，给需要使用的插槽一个原先起好的名字
<div id="app">
<cpn>
<template v-slot:center>
<span>标题span>
template>
cpn>
div>
编译作用域
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译
如何理解呢?通过代码来理解，在vue实例以及子组件中都定义了isShow属性，实例中为true，子组件为false。如果v-show定义在了vue实例中的组件，查看组件中的内容是否显示。
<body>
<div id="app">
<cpn v-show="isShow">cpn>
div>
<template id="cpn">
<div>
<p>这是一个消息p>
div>
template>
<script>
const app=new Vue({
el:"#app",
data:{
isShow:true,
},
components:{
cpn:{
template:"#cpn",
data(){
return {
isShow:false
}
}
}
}
})
script>
body>
发现组件内的消息依然显示，说明定义在实例中组件的查找的属性依然是实例中的，而不是组件本身拥有的属性。
如果将v-show定义在组件模板中：
<template id="cpn">
<div>
<p v-show="isShow">这是一个消息p>
div>
template>
页面就不再显示了，说明此时查找属性是在组件中寻找。
作用域插槽
内容参考：
官方文档对于作用域插槽介绍
父组件替换插槽的标签，但是内容还是由子组件提供
现在有一个需求：
子组件中包括一组数据，比如：pLanguages:[‘Javascritp’,’’]
需要在多个界面进行展示：
- 某些界面是以水平方向展示
- 某些界面以列表形式展示
- 某些界面直接展示一个数组
如何实现？
<body>
<div id="app">
<cpn>cpn>
<cpn>
<template v-slot="slotprops">
<span v-for="item in slotprops.data">{{item}}-span>
template>
cpn>
div>
<template id="cpn">
<div>
<slot :data="pLanguages">
<ul><li v-for="item in pLanguages">{{item}}li>ul>
slot>
div>
template>
<script>
const app=new Vue({
el:"#app",
components:{
cpn:{
template:"#cpn",
data(){
return {
pLanguages:['js','c++','java','c','python','GO']
}
}
}
}
})
script>
body>
ES6模块化的导入和导出
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
ES6 的模块化分为导出（export） 与导入（import）两个模块
export使用
第一种方式：先定义赋值，后导出
let name ="张三";
let age = 18;
let flag = true;
function sum(num1,num2){
return num1+num2;
}
export{name,age,flag}
第二种方式：
export let name ="张三";
导出函数/类
export function mul(){}; //导出函数
export Person{}; //导出类
export default
某些情况下，一个模块包含某个的功能，并不希望给这个功能命名，而且让导入者可以自己来命名，这时候就可以使用export default
- 但是在一个文件或模块中，export、import 可以有多个，export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出，在导入时要加{ }，export default 则不需要。
- export default 向外暴露的成员，可以使用任意变量来接收。
export default function(){
...};
导入的时候
import b from "./xxx.js"; // 不需要加{}， 使用任意变量接收
import使用
格式：
import {} form "..."
import { flag } from "./Export.js";
if(flag){
console.log("hhhhh");
}
如果希望某个模块中所有信息都导入，就使用 * 通配符，并且使用as 给* 起一个别名
import * as aaa from "./Export.js";
aaa.name=xxx;