江苏系统建站怎么用,wordpress群发工具,江门市亿阳科技有限公司,门户网站集约化建设目录 想实现切换不同列表展示不同数据方法一方法二#xff0c;动态组件动态组件的父组件如何传的值动态组件的子组件如何接受传的值 认识keep-alive缓存组件的生命周期 异步组件#xff0c;单独打包#xff0c;实现webpack分包#xff0c;如何对组件进行单独打包#xff0… 目录 想实现切换不同列表展示不同数据方法一方法二动态组件动态组件的父组件如何传的值动态组件的子组件如何接受传的值 认识keep-alive缓存组件的生命周期 异步组件单独打包实现webpack分包如何对组件进行单独打包目的缓解首页加载速度解决方法 异步组件代码分包默认打包过程 想实现切换不同列表展示不同数据
方法一
通过v-if判断逻辑。负责显示哪个缺点当有大量逻辑判断的时候不推荐
templatediv classhomediv classnevdivclassnevbar:classnevindex index ? newnev : v-for(item, index) in tab:keyindexclickitemClick(index){{ item }}/div/divone v-ifnevindex0/onetwo v-ifnevindex1/twothree v-ifnevindex2/three/div
/templatescript
import one from ../components/one.vue;
import two from ../components/two.vue;
import three from ../components/three.vue;
export default {name: HomeView,components: {one,two,three,},data() {return {tab: [列表1, 列表2, 列表3],nevindex: 0,};},methods: {// nev切换itemClick(index) {this.nevindex index;},},created() {},
};
/script
style scoped langscss
.nev {display: flex;justify-content: space-around;
}
.newnev {color: aqua;
}
/style方法二动态组件
1.功能类似于tab组件可用于组件的切换2.is属性决定了component当前渲染的组件is属性可以是组件或者是字符串当是字符串时代表组件的注册名称或者是标签名3.component动态组件上可以传任意参数和事件且会被所有is上的当前组件所接收简单的说component就像一个容器根据is属性来决定渲染什么组件其他的没有什么区别
templatediv classhomediv classnevdivclassnevbar:classnevindex index ? newnev : v-for(item, index) in tab:keyindexclickitemClick(index){{ item }}/div/divdivcomponent :istabsIndex[nevindex]/component/div/div
/templatescript
import one from ../components/one.vue;
import two from ../components/two.vue;
import three from ../components/three.vue;
export default {name: HomeView,components: {one,two,three,},data() {return {tab: [列表1, 列表2, 列表3],tabsIndex: [one, two, three],nevindex: 0,ISshow: one,};},methods: {// nev切换itemClick(index) {this.nevindex index;},},created() {},
};
/script
style scoped langscss
.nev {display: flex;justify-content: space-around;
}
.newnev {color: aqua;
}
/style动态组件的父组件如何传的值
componentname乞力马扎罗getClickgetClick:istabsIndex[nevindex]
/component//js中methods: {//子组件传的值getClick(e) {console.log(e);},},动态组件的子组件如何接受传的值
templatedivh2one页面{{name}}/h2button clickhandClick子组件/button/div
/template
script
export default {props:{name:{type:String,default:}},methods:{handClick(){this.$emit(getClick,接受到了子组件的值)},}
}
/script认识keep-alive
v-if切换这些都会造成组件的销毁会在这里监听到 //组件卸载unmounted(){},缺点数据的状态未保存保持存活用keep-alive包裹即可keep-alive有一些属性1include存放的name是组件自身的name属性只有名称匹配的组件会被缓存2exclude任何名称匹配的组件都不会被缓存3max最多可以缓存多少组件实例一旦达到这个数字那么缓存组件中最近没有被缓存的实例会被销毁以下是三种写法
//字符串keep-alive includehomeone,hometwocomponentname乞力马扎罗getClickgetClick:istabsIndex[nevindex]/component/keep-alive//正则keep-alive :include/homeone|hometwo/componentname乞力马扎罗getClickgetClick:istabsIndex[nevindex]/component/keep-alive//数组keep-alive :include[homeone, hometwo]componentname乞力马扎罗getClickgetClick:istabsIndex[nevindex]/component/keep-alive缓存组件的生命周期
该组件内部
//缓存组件的生命周期进入活跃状态activated(){console.log(活跃)},//离开deactivated(){console.log(离开)}异步组件单独打包实现webpack分包 如何对组件进行单独打包目的缓解首页加载速度
解决方法 异步组件
vue中通过vue提供的函数defineAsyncComponentimport函数可以让webpack对导入文件进行分包处理目的是可以对其进行分包处理步骤
//异步组件
import {defineAsyncComponent} from vue
//工厂函数写法返回promise对象
const threevuedefineAsyncComponent(()import(../components/three.vue))npm run build 代码分包默认打包过程
默认情况下构建整个组件树的过程中因为组件和组件之间是通过模块化直接依赖的那么wbpack在打包时候就会将组件模块打包在一起这个时候随着项目的不断变大app.js文件的内容过大会造成首屏的渲染速度变慢打包时代码的分包对于一些不需要立即使用的组件可以单独对他们进行拆分拆分成一些小的代码块chunk.js这些chuck.js会在需要时从服务器加载下来并且运行代码
