需要理解的知识
模块化
每个JS文件中都有自己的变量,如果不使用模块化,容易造成js内部属性相同导致的不可预知问题。
将自己编写的js文件封装为属于自己的模块,通过模块调用属性和方法。
常用的模块化规范:CommonJS、AMD、CMD、ES的Modules。
CommonJS
CommonJS导入和导出操作
导出
module.exports = {
flag: true,
test(a,b){
return a+b
},
demo(a,b){
return a*b
}
}导入
//CommonJS模块
let {test,demo,flag} = require('moduleA');
//等同于
let _mA = require('moduleA');
let test = _ma.test;
let demo = _mA.demo;
let flag = _mA.flag;
需要掌握的知识
插槽
基础使用
通过slot属性指定插槽区域。
slot中的内容是默认值,如果在调用时没有填写内容,则显示默认内容。
<body>
<div id="app">
<sub1>替换内容sub1>
div>
body>
<template id="sub1">
<div>
默认值
<slot>slot>
div>
template>
<script>const app = new Vue({
el: '#app',
components:{
sub1:{
template:'#sub1'
}
}
})script>
具名插槽
可以指定插槽的名称,在使用时通过【slot】属性指定具名插槽要展示的内容。如果没有指定【slot】,则会替换匿名插槽中的内容。
<body>
<div id="app">
<sub1><span slot='test1'>哈哈哈span><span slot='test2'>嘿嘿嘿span>sub1>
div>
body>
<template id="sub1">
<div>
默认值
<slot name="test1">slot>
<slot name="test2">slot>
div>
template>
作用域插槽
作用域插槽是指父模板中使用子模板作用域的数据。
父模板定义展示样式,子模板提供数据:在子模板中绑定一个属性,传入需要使用的数据。在调用时通过【slot-scope】属性接收数据,从而在父模板中使用子模板的数据。
<body>
<div id="app">
<use1>
<template slot-scope="sss">
{{sss.abc.join(' - ')}}
template>
use1>
<use1>use1>
<use1>use1>
div>
body>
<template id="use1">
<div>
<slot :abc="stuList">
<ul>
<li v-for="item in stuList">{{item}}li>
ul>
slot>
div>
template>
<script>const vue = new Vue({
el: '#app',
components:{
use1:{
template:'#use1',
data(){return {
stuList:['user1','user2','user3']
}
}
}
}
})script>