vue2高级

bus传参

利用vue空实例实现跨页面跨组件传参方式

创建空白的vue对象并导出

import vue from "vue";
var bus = new vue();
export default bus;

监听事件

bus.$on("colorchange",e=>{})

添加事件

bus.$emit("colorchange",'red')

移除事件

bus.$off("移除监听")

跨组件传参

//1.bus传参
//2.$parent 父组件
//3.$root 根组件
//4.$refs.myref dom引用
<button @click="$parent.bg='yellow'">红</button>
		<button @click="$parent.bg='green'">绿</button>
		<button @click="$parent.bg='blue'">蓝</button>
		<button @click="showRoot">根节点</button>
//5.vuex
import Vue from 'vue'
import Vuex from 'vuex'
import user from "./modules/user.js"
import rank from "./modules/Rank.js"
Vue.use(Vuex)

export default new Vuex.Store({
	state: {},
	getters: {},
	mutations: {},
	actions: {},
	modules: {
		user,
		rank
	}
})
//6.cookie/localStorage/sessionStorage
SET_USER(state, data) {
			state.user = data;
			localStorage.setItem("user", JSON.stringify(data))
		},
		SET_TOKEN(state, data) {
			state.token = data;
			localStorage.setItem("token", data);
		}

v-model

//是语法糖,简写模式
:value="w" @input="w=$event"
v=model="w"
//在组件中指定v-model
model:{
    prop:"num",
    event:"change"
}
<SteprView v-model="w"></SteprView>
		<SteprView :value="w" @input="w=$event"></SteprView>

nextTick

数据更新,等待dom更执行回调函数

set 强制更新 this.$set

changeIt() {
				// this.list[2] = "js";
				// 强制更新
				this.$set(this.list, 2, "js");
				// this.list.splice(2,1,"js");
				console.log(this.list);

				// vue双向绑定原理,数据更新,视图更新,视图更新,数据更新  
				// 数据和视图的桥梁是:vue指令

				// 原理:通过Object.definePropery 劫持对象的getter获取,setter设置

				// 实现数组的更新,重新数组的方法原型来执行 ,push,pop,split

				// vue3双向绑定 使用 proxy代理
			}

混合 Vue.mixin

// 全局的,每个组件创建完毕输出自己,和当前时间
Vue.mixin({
	data(){
		return {
			mynum:15,
		}
	},
	created(){
		console.log(this._uid,Date.now(),this);
	}
})