高级vue 知道你就是大佬

跨组件传参

1. 利用vue空实例实现跨页面传参方式
2. var bus = new Vue();
3. bus.$on(“colorchange”,e=>{})
4. bus.$emit(“colorchange”,‘red’)
5. bus.$off(“移除监听”)

bus传参

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

/ vue文件 创建实例
<template>
  <div id="app">
    <nav :style="{'backgroundColor':bg}">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
	</nav>
    <router-view/>
  </div>
</template> 

import bus from '@/utils/bus.js'
	export default{
		data(){
			return{
				bg:'orange'
			}
		},
		created() {
			// 监听colorchane时间,动态改变bg
			bus.$on("colorchange",$event=>{
				this.bg = $event
			})
			console.log(this.$children)
		}
	}
	//有bus.$on("colorchange",e=>{})
	// bus.$emit("colorchange","red")
	//bus.$off("移除监听")

v-model

1. 组件上的 v-model默认使用 value值 input事件 来进行内容的双向绑定(也可以自定义值和事件名称)
2. 是语法糖,简写模式:value=“w” @input=“w=$event” v=model=“w”
3. 在组件中指定v-model
   model:{
   prop:“num”,
   event:“change”
   }

data(){
	return{
	count:this.value
	}
},
		props:{
			value:{type:Number,default:1}
		},
		watch:{
			// 当count发生改变的时候,发送一个input事件 值为this.count
			"count":{
				handler(){
					this.$emit("input",this.count)
				}
			},
			"value":{
				handler(){
					this.count = this.value
				}
			}
		}

nextTick

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

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

data() {
			return {
				// num:1
				msg1: "我爱学习",
				msg2: '你爱学习',
			}
		},
		methods: {
 
			getNew() {
				this.msg1 = "他爱学习"
				// 数据更新 ,等待dom也更新执行this.$nextTick的回调函数
				this.$nextTick(() => {
					this.msg2 = document.getElementById("myh").innerText
				})
			},
		}

set

1. 强制更新视图
2. vue双向绑定原理,数据更新,试图更新,试图更新,数据更新
3. 数据与视图桥梁是:所有的指令
4. 原理:通过object.definePropery劫持对象的getter获取,setter设置
5. 使用数组的更新,重写了数组的方法原型来实现.push pop split

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

data() {
			return {
				list:["天","天","向","上"]
			}
		},
		methods: {
			changeIt(){
				// 强制更新
				this.$set(this.list,3,"下")
				console.log(this.list)

混合mixin

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

Vue.mixin({
	data(){
		return{
			mynum:15,
		}
	},
	created() {
		console.log(this._uid,Date.now(),this)
	}
})