加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
vue组件高级特性.txt 3.67 KB
一键复制 编辑 原始数据 按行查看 历史
XiaoLu 提交于 2020-12-22 16:04 . vue高级特性
一、watch进阶
将处理逻辑抽象出去了,以method的方式被复用
给定义下面两个重要属性留出了编写位置
watch:{
a:{
handler:'doSomething',//a对象发生变化 触发methods的doSomething函数
deep:true,//监听对象内属性的变化
immediate:true,//创建组件立刻执行一次handler
}
},
二、$event的不同表现
可以通过$event.target获得事件所在的DOM对象
三、动态组件
通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动态组件
<component :is="currentView"></component>
<keep-alive>` 要求同时只有一个子元素被渲染
<keep-alive>
<component :is="currentView"></component>
</keep-alive>
比如keep-alive下有A,B,C三个组件,但是我只想缓存A和B,(不活动的组件实例缓存起来,而不是销毁它们)
就要用到**【include和exclude】来进行筛选过滤,根据你的过滤条件确定缓存哪个
<!-- 逗号分隔字符串 -->(a和b 首先检查的是组件的name 其次为父组件 components 选项的键值)
<!-- 数组 (use v-bind) -->
<keep-alive :include="['a', 'b']">
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
四、异步组件
异步组件说白了就是按需加载,使用时才装入需要的组件,可以有效的提高首次装入页面的速度。比如在路由切换时。
{
path: '/promisedemo',
name: 'PromiseDemo',
component: resolve => require(['../components/PromiseDemo'], resolve)
}
五、内联模板 inline-template的使用(类似组件插槽)
父组件
<child-component inline-template>
<div>
<h2>在父组件中定义子组件的模板</h2>
<p>{{msg}}</p>
</div>
</child-component>
子组件
export default{
name:'ChildComponent',
data(){
return{
msg:'张三'
}
}
}
最终显示
<div data-v-763db97b="">
<h2 data-v-763db97b="">在父组件中定义子组件的模板</h2>
<p data-v-763db97b="">张三</p>
</div>
六、全局组件注册 https://blog.csdn.net/weixin_43959276/article/details/106353555
我们有n个组件,那么就需要多次的import导入并注册,
如果是高频繁使用的,就会显得非常繁琐,那么如何优化呢?我们可以利用webpack的一个api:require.context
新建一个文件global.js
import Vue from 'vue' // 引入vue
// 处理首字母大写 abc => Abc
function changeStr(str){
return str.charAt(0).toUpperCase() + str.slice(1)
}
/*
require.context(arg1,arg2,arg3)
arg1 - 读取文件的路径
arg2 - 是否遍历文件的子目录
arg3 - 匹配文件的正则
关于这个Api的用法,建议小伙伴们去查阅一下,用途也比较广泛
*/
export default{
install(Vue) {
const requireComponent = require.context('.', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys()) // 打印
requireComponent.keys().forEach(fileName => {
const config = requireComponent(fileName)
console.log('config:',config) // 打印
const componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '') // ./child1.vue => child1
)
Vue.component(componentName, config.default || config) // 动态注册该目录下的所有.vue文件
})
}
}
// 2 - 将globalComponent.js引入main.js
import Global from './components/globalcomponets'
Vue.use(Global);
// 3 - 使用这类组件不再需要引入和注册,直接标签使用即可
<template>
<div>
<h1>I am HelloWorld</h1>
<Child1></Child1>
</div>
</template>
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化