介绍

最近用vuejs在写项目,就把一些遇到的小注意点记录下:

正文

1.组件间传递参数的this问题

从父组件传递给子组件的参数 需要在props中定义 并且在methods中调用需要加上this.

1
2
3
4
5
6
props: [
"pageData"
],
methods:{
console.log(this.pageData) // 这里需要加this 但是注意在<template>里面不用,直接使用就可以
}

2.路由切换时执行的操作(如关闭定时器)

将切换路由要执行的函数写在destroyed()方法内。
Vuejs生命周期

1
2
3
4
5
// 和mounted()同一级
destroyed(){
clearInterval(this.COUNTTIMER1);
clearInterval(this.COUNTTIMER2);
}

3.Vue日期选择器问题

Vue 的日期选择器等input框如果绑定一个函数,这个函数里面又有修改或初始化这个input的值的时候,则这个函数里面如果还有内部函数,则会在input值修改的时候又执行。

4.组件间传递参数读取的问题

父组件传递到子组件的所有参数,可以在子组件通过 this.$props 访问,如 this.$props["openData"]

5.动态引入图片的问题

先将图片通过 require 引入,

1
2
3
4
5
6
7
8
9
10
<template>
<img :src="user_head_img" >
</template>
<scpirt>
data(){
return {
user_head_img: require("../../assets/heade-img.png"),
}
}
</script>

6.关于ob的介绍

__ob__: Observer这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。

7.favicon.icon 问题

直接放在项目根目录,在 index.html 中直接用这个路径即可,这是最简单粗暴好用的方法。

8.同级组件之间传递数据

同级组件之间传递数据

1
2
3
4
参考http://blog.csdn.net/wang_meiwei/article/details/75948844
// 公共中央事件总线 eventBus.js
import Vue from "Vue"
export default new Vue

1
2
3
4
5
6
7
8
9
// 子组件1
import BUS from "../../assets/js/eventBus.js"
<span @click="test">测试点击</span>
methods:{
test(){
let that = this;
BUS.$emit("newEventName","你好这是传递的数据")
}
}
1
2
3
4
5
6
7
8
//  子组件2
import BUS from "../../assets/js/eventBus.js"
mounted(){
let that = this;
BUS.$on("newEventName",(data)=>{
console.log(data)
})
}

慢慢更新整理….