vue2高级

1.bus传参

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

var bus = new Vue();
bus.$on("colorchange",e=>{})
bus.$emit("colorchange",'red')
bus.$off("移除监听")

2.跨组件传参的常用方法

1.bus传参

2.$parent父组件

3.$root根组件

4.$refs.myref dom引用

5.vuex

6.cookie/localStorage/sessionStorage

3.v-model

1.是语法糖，简写模式

:value="w" @input="w=$event"
v=model="w"

2.在组件中指定v-model

model:{
    prop:"num",
    event:"change"
}

4.nextTicker 数据更新

<template>
    <h1 id="myh">{{msg1}}</h1>
	<h1>{{msg2}}</h1>
</template>

<script>
    export default{
		data(){
			return{
				msg1:"早上好",
				msg2:"晚上好",
			}
		},
    methods:{
        getNew(){
				this.msg1="中午好";
				setTimeout(()=>{
					this.msg2 = document.getElementById("myh").innerText;
				},10)
				// 数据更新，等待dom也更新后执行this.$nextTick的回调函数
				this.$nextTick(()=>{
					this.msg2 = document.getElementById("myh").innerText;
				})
			}
        }
</script>

5.set视图强制更新

<template>
        <ul style="text-align: left;">
               <li v-for="(item,index) in list" :key="index">{{item}}</li>
        </ul>

</template>

<script>
data() {
            return {
                list:["天","天","向","上"]
            }
        },
        methods: {
            changeIt(){
                // 强制更新
                this.$set(this.list,3,"下")
                console.log(this.list)
                // vue双向绑定原理,数据更新,试图更新,试图更新,数据更新
                // 数据与视图桥梁是:所有的指令
                // 原理:通过object.definePropery劫持对象的getter获取,setter设置
                // 使用数组的更新,重写了数组的方法原型来实现.push pop split 
            }

}

</script>

6.混合

mixin作用: 多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。