【无标题】

vue2高级

bus传参

//导入vue
import Vue from 'vue';
// 创建vue实例
var bus = new Vue();
//导出实例
export default bus

先创建一个通用工具bus
bus.$on(“事件名”,事件值)监听事件bus.$emit(‘事件名’,事件值) 发送事件
监听事件

created() {
			//监听colorchange事件,动态改变bg
			bus.$on("colorchange", $event => {
				this.bg = $event
			})
		}

发送事件

methods:{
			setColor(data){
				bus.$emit('colorchange',data)
			}
		}

通过给button添加单击事件触发

<button @click="setColor('red')">红</button>
<button @click="setColor('green')">绿</button>
<button @click="setColor('blue')">蓝</button>

2.跨组件传参
bus传参
$parent 父组件
$root 根组件
$refs.myref dom引用
vuex
cookie/localStorage/sessionStorage

3.v-model
v-model=“w” 是一种vue语法简写形式 :value=“w” @input=“w=$event”

<SteperView :value="w" @input="w=$event"></SteperView><br>
<SteperView v-model="w"></SteperView>

在组件里面

export default{
		data(){
			return{
				count:this.value,
			}
		},
		props:{
			value:{type:Number,default:1}
		},
		watch:{
			'count':{
				handler(){
					this.$emit('input',this.count)
				},
				deep:true
			},
			'value':{
				handler(){
					this.count = this.value
				},
				deep:true
			}
		}
	}

如果用除:value input以外，可以通过如下方式

<SteperView2 :num="w" @change="w=$event"></SteperView2>
<SteperView2 v-model="w"></SteperView2>

export default{
		data(){
			return{
				count:this.num,
			}
		},
		model:{
			prop:"num",
			event:"change"
		},
		props:{
			num:{type:Number,default:1}
		},
		watch:{
			'count':{
				handler(){
					this.$emit('change',this.count)
				},
				deep:true
			},
			'num':{
				handler(){
					this.count = this.num
				},
				// deep:true
			}
		}
	}

4.nextTick数据更新,等待dom更新执行回调函数
5.set强制更新
遵循vue双向绑定原理
数据更新，视图更新=》视图更新，数据更新
数据和视图的桥梁是:vue指令
原理：通过object.definePropery 劫持对象的getter获取，setter设置
实现数组的更新，重新数据的方法原型来执行， push，pop，split
vue3双向绑定 使用proxy代理