使用发布订阅模式
使用发布订阅模式来处理非父子组件之间的通信
vue中的发布订阅
main.js
Vue.prototype.$center = new Vue();
one.vue
methods: {
addAction(){
// 派发事件
// Bus.$emit('send', this.value);
this.$center.$emit('send', this.value);
this.value = '';
}
}
two.vue
methods: {
listener(data){
console.log('订阅了:', data);
this.list.push(data);
}
},
created(){
// 添加监听
this.$center.$on('send', this.listener);
},
beforeDestroy(){
//移除监听,防止内存泄漏
this.$center.$off('send', this.listener);
}
ref 的使用
ref是组件内的dom中的唯一标识符
给普通标签设置,获得是dom元素
给组件标签设置,获得是组件对象
<div ref="box" class="box"></div>
<Two ref="two"/>
通过refs获得组件对象后,可以操作组件的属性也可以调用方法
this.$refs.one.title = this.$refs.input.value;
slot
solt的基本使用
slot是一个插槽,可以获得组件在外部当成标签调用时,标签包裹的内容
slot位置在哪里,接收的内容就显示在哪里
slot可以设置名字,设置了名字的slot接收相对于的模版。没有名字slot接收没有设置slot名字的模版
App.vue
<Wrap>
<span>test</span>
<h1 slot="h1">test</h1>
<h6 slot="h6">test</h6>
<Box/>
</Wrap>
Wrap.vue
<div class="wrap">
<slot name="h1"/>
<h1>wrap</h1>
<slot name="h6"/>
<slot/>
</div>
solt的组件通信
组件的关系判断:
看这个标签被什么组件使用了,就是谁的子组件,而不是看是被谁包裹
方式1:
父子关系组件:
参考方法前一天笔记
非父子关系组件:
使用发布订阅模式来进行组件间的通信
方式2:
c
h
i
l
d
r
e
n
和
children和
children和parent
它可以直接获得其子节点/父节点(非组件)
当子节点被点击时,遍历每一个child
判断是否是点击的这个child,是,就设置isActive=true,不是,就设置为false
this.$children.forEach((child, index)=>{
if(index === flag){//选中
child.isActive = true;
}else{//不选中
child.isActive = false;
}
})
// 调用了父节点的方法,取消所有选中
this.$parent.selectTabByIndexAction(this.index);
vue插件
如果需要写一个vue的插件。
就向外输出一个对象
这个对象必须要有一个方法,方法名为install
外面调用插件,Vue.use(插件模块)
内部install方法就会执行\
全部引入写法
plugin/index.js
import tabs from './van-tabs.vue'
import tab from './van-tab.vue'
export default {
install(Vue){
console.log('install方法执行了....');
Vue.component(tabs.name, tabs);
Vue.component(tab.name, tab);
}
}
main.js
import plugin from './plugin'
Vue.use(plugin);
按需应用写法:
plugin/index.js
export const Tabs = {
install(Vue){
Vue.component(tabs.name, tabs);
}
};
export const Tab = {
install(Vue){
Vue.component(tab.name, tab);
}
};
App.vue
import {Tabs, Tab} from './plugin'
import Vue from 'vue'
Vue.use(Tabs).use(Tab); //链式写法引入
两种写法可以同时写,用户使用时就可以按需引用
动画
自定义name,就可以在多个组件中区分开来执行动画
class名字会发生变化
v-enter [name]-enter
v-enter-to [name]-enter-to
v-enter-active [name]-enter-active
v-leave [name]-leave
v-leave-to [name]-leave-to
v-leave-active [name]-leave-active
使用第三方库类时
直接设置动画的class名字
enter-class 就是修改v-enter
enter-to-class 就是修改v-enter-to
enter-active-class 就是修改v-enter-active
leave-class 就是修改v-leave
leave-to-class 就是修改v-leave-to
leave-active-class 就是修改v-leave-active
<!-- <transition enter-class="a" enter-to-class="b" enter-active-class="c"> -->
<transition enter-active-class="bounce"
leave-active-class="hinge">
<div class="box" v-if="isShow">
我要出来的内容
</div>
</transition>
设置动画执行模式
mode="out-in"
...
更多请看官方文档
一个开关,isShow控制多组标签显示隐藏。
多组标签需要执行同一个动画,使用transition-group
自定义指令
全局指令
自定义指令格式:
和组件写法类似
Vue.component(‘组件名字’, 组件的内容);
Vue.directive(‘指令名字’, 指令的内容);
在main.js中定义指令
外部调用指令:
v-name:arg.modifier.modifier…=“expression”
<div v-innter-text:title.a.b="1+2+3"></div>
定义指令:
Vue.directive('innter-text', (el, info)=>{
// info.value 是指令的值
// info.expression 是指令的表达式
// info.arg 是指令的参数
// info.modifiers 是指令的修饰符
// info.name 是指令的名字
// info.rawname 是指令在外部调用的名字
el.innerText = info.value;
});
局部指令
export default {
// 局部指令
directives: {
'inner-html'(el, info){
el.innerHTML = info.value;
}
}
...
}
自定义过滤器
自定义过滤器格式:
和组件写法类似
Vue.component(‘组件名字’, 组件的内容);
Vue.directive(‘指令名字’, 指令的内容);
Vue.filter(‘过滤器的名字’, 过滤器的内容);
过滤器功能,不会操作原始数据,是有显示在页面上的数据会发生变化
只有在 v-text v-bind {{}} 可以使用
全局过滤器
main.js
Vue.filter('even', (value)=>{
console.log('过滤器执行了');
return value.filter(item=>!(item%2));
})
局部过滤器
export default {
// 局部过滤器
filters: {
'currency'(value){
// return '¥'+value
return '$' + (value / 7).toFixed(2);
}
},
...
}
调用过滤器,展示的是过滤器函数执行的结果
<p>{{list | even }}</p>
<p>{{ arr | odd }}</p>
<p>{{ arr | arrFilter('odd') }}</p>
<p>{{ arr | arrFilter('even') }}</p>
vue中请求数据
使用axios
跨域请求处理方法:
在vue中自己配置正向代理
vue.config.js
devServer: {
// 配置项目的正向代理
proxy: {//http-proxy-middleware
'/api': {
target: 'http://localhost:9000',
changeOrigin: true
}
}
}
$nextTick
钩子函数 updata 方法:
data,props,computed 任意一个值发生变化,都执行
有时候我们需要特定的数据发生了变化,再执行事件\
在需要监听的数据 修改方法下 执行 $nextTick
接收data数据的上一次修改,进行监听dom的变化,dom都更新完了,才调用回调。
数据修改和$nextTick之间不要写代码
这里是监听轮播数据发生改变后在执行创建swper
this.$nextTick(()=>{
console.log('$nextTick');
const swiper = new Swiper(this.$refs.swiper, {
pagination: {
el: '.swiper-pagination',
}
});
});
数据变化后的执行顺序:
数据变化后, watch —> beforeUpdate ----> 更新dom ----> updated ----> $nextTick
组件上非props 属性绑定
官网传送: link.
在组件上绑定非props属性,默认绑定到组件最外层元素上面,通过使用 inheritAttrs: false,
禁用继承,在组件内需要继承到的元素上v-bind="$attrs",自定义选择要继承到的元素:
<myInput placeholder="请填写email" />
myInput.vue
<div> //默认会继承要这层元素上
<input v-bind="$attrs" />
</div>
//...
data(){
//...
},
inheritAttrs: false