vue从入门到放弃（五）

----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------
----------------------------------------------------点击这里《专栏目录》查看更多----------------------------------------------------

今日学习内容：

1、动态组件

2、异步组件

3、keep-alive缓存组件

4、全局组件

5、公共组件函数调用

动态组件

dynamicComponentDemo.vue

<template><div><h1>动态组件</h1><!-- 写法一： --><!-- <slotDemo/> --><!-- 写法二： --><component :is="slotDemo"/><!-- 动态遍历多个组件 --><div v-for="(item,index) in arr" :key="index"><component :is="item"/></div></div>
</template>
<script>
import slotDemo from './slotDemo.vue'
import nextTickDemo from './nextTickDemo.vue'
import provideAndInjectDemo from './provideAndInjectDemo.vue'
import slotDemo2 from './slotDemo2.vue'
export default {name: "",components: {slotDemo,nextTickDemo,provideAndInjectDemo,slotDemo2},data: () => ({slotDemo:'slotDemo',arr:['nextTickDemo','provideAndInjectDemo','slotDemo2']})
}
</script>

App.vue

<template><div id="app"><dynamicComponentDemo/></div>
</template><script>
import dynamicComponentDemo from './components/advanceDemo/dynamicComponentDemo.vue'
export default {name: 'App',components: {dynamicComponentDemo}
}
</script>

异步组件

asynComponentDemo.vue

<template><div><h1>异步组件</h1><p>使用场景：1.加载大组件；2.需要后置性的组件</p><p>作用：提升性能、提升用户体验</p><slotDemo/></div>
</template>
<script>
// import slotDemo from './slotDemo.vue'
export default {components: {// slotDemo// 异步组件写法一：// slotDemo:()=>{//   return import('./slotDemo.vue')// }// 异步组件写法二：slotDemo:()=> import('./slotDemo.vue')}
}
</script>

App.vue

<template><div id="app"><asynComponentDemo/></div>
</template><script>
import asynComponentDemo from './components/advanceDemo/asynComponentDemo.vue'
export default {name: 'App',components: {asynComponentDemo}
}
</script>

keep-alive缓存组件

keepAlivedDemo.vue

<template><div><h1>keep-alive 标签</h1><button type="button" @click="changeFun('a')">A</button><button type="button" @click="changeFun('b')">B</button><button type="button" @click="changeFun('c')">C</button><keep-alive><comA v-if="tap === 'a'"/><comB v-if="tap === 'b'"/><comC v-if="tap === 'c'"/></keep-alive><p>keep-alive使用场景：用于缓存组件、频繁切换，不需要重复渲染的情况，也是vue常用性能优化方案之一</p><p>复杂的组件可以使用keep-alive，简单的可以使用v-show来提高性能</p></div>
</template>
<script>
import comA from './comA.vue'
import comB from './comB.vue'
import comC from './comC.vue'
export default {name: "",components: {comA,comB,comC},data: () => ({tap:'a'}),methods: {changeFun(val) {this.tap = val}}
}
</script>

comA.vue(comB.vue和comC.vue跟comA一样)

<template><div>组件A</div>
</template>
<script>
export default {mounted() {console.log('A mounted');},activated(){console.log('keepalive加载');},deactivated(){console.log('keepalive离开');},destroyed() {console.log('A destroyed');}
}
</script>

App.vue

<template><div id="app"><keepAlivedDemo/></div>
</template><script>
import keepAlivedDemo from './components/advanceDemo/keepAlivedDemo.vue'
export default {name: 'App',components: {keepAlivedDemo}
}
</script>

全局组件

allComponentDemo.vue

<template><div><h1>全局注册组件</h1><loading/></div>
</template>
<script>
// 全局注册的组件，可以在项目任意地方使用，不需要注册和引入
export default {name: "",data: () => ({})
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-focinserted:el=>{el.focus() // 聚焦}
});// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件new Vue({render: h => h(App),
}).$mount('#app')

App.vue

<template><div id="app"><allComponentDemo/></div>
</template><script>
import allComponentDemo from './components/advanceDemo/allComponentDemo.vue'
export default {name: 'App',components: {allComponentDemo}
}
</script>

公共组件函数调用

toastCom.vue

<template><div class="wrap"><div>{{text}}</div><div>{{temp}}</div></div>
</template>
<script>
export default {// props 写法一：// props: {//   text:String// },// props 写法二：props: {text:{type:String,default(){return ''}}},// props 写法三：// props: ['text']data: () => ({temp:'Hello World'})
}
</script>
<!-- scoped表示只在当前样式生效 -->
<style lang="scss" scoped>
.wrap{color: #fff;background: :rgba(0,0,0,0.8);width: 200px;padding: 10px;position: fixed;left:50%;top:50%;margin-left: -100px;margin-top: -60px;border-radius: 10px;
}
</style>

App.vue

<template><div id="app"><toastCom text="这是一个标题"/></div>
</template><script>
import toastCom from './components/advanceDemo/toastCom.vue'
export default {name: 'App',components: {toastCom}
}
</script>

toastCom.js

// 1.引入组件和vue
import Vue from 'vue'
import toastCom from './toastCom.vue'
// 利用vue.extend函数，传入vue组件，返回构造函数
const toastConstractor = Vue.extend(toastCom)
// 2.利用构造函数，创建一个实例
function toastFun(){const toastEle = new toastConstractor({ // 构造函数转成ele节点el: document.createElement('div'), // 创建一个divdata(){return {text:text}}})document.body.appendChild(toastEle.$el)
}// 3.函数挂在原型上
function expToastFun(){Vue.prototype.$toast = toastFun()// 把函数挂在全局vue实例上，这样任何地方都可以通过￥toast来调用
}export default expToastFun// Vue.prototype.$toast = toastFun()
// this.$toast 调用

main.js

import Vue from 'vue'
import App from './App.vue'
import toastJs from './components/advanceDemo/toastCom.js'Vue.config.productionTip = false// 全局自定义指令
Vue.directive('foc',{ // 自定义指令v-focinserted:el=>{el.focus() // 聚焦}
});// 全局注册组件
import Loading from './components/advanceDemo/loading.vue'
Vue.component('Loading',Loading) // 第一个参数是组件名；第二个参数是组件// 全局extend注册组件，并函数调用
Vue.use(toastJs)new Vue({render: h => h(App),
}).$mount('#app')

toastTest.vue

<template><div><h1>测试toast函数调用</h1></div>
</template>
<script>
export default {mounted(){this.$toast('This is toast')}
}
</script>

App.vue

<template><div id="app"><toastTest/></div>
</template><script>
import toastTest from './components/advanceDemo/toastTest.vue'
export default {name: 'App',components: {toastTest}
}
</script>

vue从入门到放弃（五）相关推荐

vue实战入门基础篇五：从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录第 ...
【一文学会】vue.js入门到放弃
最近正好学习了vue.js就准备将此记录下来,希望能给各位做个参考,当然因为技术有限所以出现很多错误,烦请大佬们能够不吝赐教,此篇博客会一直保持更新,以后关于vue就在本篇博文上填加内容了. VueJ ...
vue从入门到放弃（六）
今日学习内容: 1.vuex的介绍 2.vuex的结构和组成 3.vuex的安装命令 4.vuex的state.getters.mutations.actions的使用 5.modules模块化和命名 ...
Vue从入门到放弃（一）——指令篇
文章目录 1.v-if/v-else和v-show 1.1 v-if 1.2v-show 1.3区别 2.v-for 2.1遍历数组 2.2遍历对象 3.v-text和v-html 3.1v-text ...
Spring Boot Vue Element入门实战（五）封装axios
本博客属作者原创,未经允许禁止转载,请尊重原创!如有问题请联系QQ509961766 (一)关于Axios Axios 是一个基于 promise 的 HTTP 库,简单的讲就是可以发送get.pos ...
keras从入门到放弃(五）独热编码和顺序编码
上次我们用探究多分类的问题,目标数据做独热编码,用 categorical_crossentropy 来计算softmax交叉熵,但是多分类还可以将目标数据做顺序编码,用 sparse_categor ...
python入门之玩转列表我的菜单_python入门到放弃(五)-基本数据类型之list列表
1.概述列表是python的基本数据类型之一,是一个可变的数据类型,用[]方括号表示,每一项元素使用逗号隔开,可以装大量的数据 #先来看看list列表的源码写了什么,方法:按ctrl+鼠标左键点lis ...
Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸插件插件可以完成更多 loader 不能完成的功能.插 ...

vue从入门到放弃（五）

动态组件

dynamicComponentDemo.vue

App.vue

异步组件

asynComponentDemo.vue

App.vue

keep-alive缓存组件

keepAlivedDemo.vue

comA.vue(comB.vue和comC.vue跟comA一样)

App.vue

全局组件

allComponentDemo.vue

main.js

App.vue

公共组件函数调用

toastCom.vue

App.vue

toastCom.js

main.js

toastTest.vue

App.vue

更多文章

vue从入门到放弃（五）相关推荐

最新文章

热门文章