一 vue定义全局变量和全局方法
1.1 定义common.vue 里面存储全局变量与方法,供各个vue文件使用
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>
<template>
{{globalHttpUrl}}
</template>
<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用
globalHttpUrl: global.httpUrl
}
},
</script>
很显然上面的方式虽然能实现全局存储,但是如果每个vue文件都需要使用这个全局变量,那么每个vue文件都需要引用这个组件,这样代码的耦合性太高。
1.2 main.js中引入全局变量和方法,供各个vue文件使用
<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function commonFun() {
console.log("公共方法")
}
// 暴露出这些属性和方法
export default {
httpUrl,
commonFun
}
</script>
// main.js 文件
// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global
<template>
{{globalHttpUrl}}
</template>
<script>
// 导入共用组件
import global from './common.vue'
export default {
data () {
return {
username: '',
password: '',
// 赋值使用, 可以使用this变量来访问
globalHttpUrl: this.COMMON.httpUrl
}
},
</script>
同样,也可以main.js 中导入普通的js文件(不光只能导vue文件),写法与上面一样
1.3 vuex
1.4 localstorage、cookie等本地存储
二 Vue.observable API用过没?
随着组件的细化,就会遇到多组件状态共享的情况, Vuex当然可以解决这类问题,不过就像 Vuex官方文档所说的,如果应用不够大,为避免代码繁琐冗余,最好不要使用它,今天我们介绍的是 vue.js 2.6 新增加的 Observable API ,通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。
// 创建store目录,store目录下创建index.js
import Vue from 'vue'
export const store = Vue.observable({
count: 0,
name: '李四'
})
export const mutations = {
setCount (count) {
store.count = count
},
changeName (name) {
store.name = name
}
}
// 在组件中使用
<template>
<div class="container">
<button @click="setCount(count+1)">count增加</button>
</div>
</template>
<script>
import { store, mutations } from '@/store/index'
export default {
computed: {
count () {
return store.count
}
},
methods () {
// 将store中的mutations方法赋值拿到
setCount: mutations.setCount
}
}
</script>
体做法与vuex类似,但是比vuex省事了很多
三 vue强制刷新组件
背景: 在开发过程中,有时候会遇到这么一种情况,通过动态的赋值,虽然dom没有及时更新,但是能够获取到动态赋的值,这就需要我们手动进行强制刷新组件。(dom异步渲染,可参考之前文章)
1 比较好的例子:
2 如果是刷新某个子组件,则可以通过v-if指令实现。我们知道,当v-if的值发生变化时,组件都会被重新渲染一遍。因此,利用v-if指令的特性,可以达到强制刷新组件的目的。
<template>
<comp v-if="update"></comp>
<button @click="reload()">刷新comp组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
name: 'parentComp',
data() {
return {
update: true
}
},
methods: {
reload() {
// 移除组件
this.update = false
// 在组件移除后,重新渲染组件
// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
this.$nextTick(() => {
this.update = true
// 做自己的一些事
})
}
}
}
</script>
3 this.forceUpdate();进行强制渲染
从搜索资料得出结果:因为数据层次(for循环太多)太多,render函数没有自动更新,需手动强制刷新。
调用强制更新方法this.forceUpdate()会更新视图和数据,触发updated生命周期。
我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.forceUpdate() )
四 Vue中target和currentTarget的使用
event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。
例子:
<a href="javascript:;" @click="openPlays($event)" class="openplays-btn">展开
<i class="iconfont">》》》》</i>
</a>
<script>
openPlays (e) {
// 当使用currentTarget时,不管你点击的是a或者a之中的任何元素,其获取到的对象都为绑定事件的a;当使用target时,如果你点击到a元素则传a元素,如果点击到a之中的某个子级元素则传a之中的某个元素。
console.log(e.target,e.currentTarget)
}
</script>
补充:Vue中的$event
的用法:
场景1:获取原生DOM事件的事件对象
在DOM事件的回调函数中传入参数$event
,可以获取到该事件的事件对象 (上面的是例子)
场景2:事件注册所传的参数(子组件向父组件传值)
在子组件中通过$emit
注册事件,将数据作为参数传入,在父组件中通过$event
接收
// 子组件 Hello.vue
<template>
<button @click="$emit('hello', 'hello')">Hello</button>
<!-- $emit()的第一个参数是定义的事件名,第二个参数是要传入的数据 -->
</template>
<script>
export default {
}
</script>
// 父组件
<template>
<Hello @hello="showData($event)" />
<h4>{{data}}</h4>
</template>
<script>
import Hello from '@/components/Hello.vue'
import {
ref
} from 'vue'
export default {
components: {
Hello
},
data(){
return {
data
}
},
method:{
showData(e){
this.data = e
}
}
}
</script>