Vue高级

Vue高级的定义

bus传参

利用vue空实例实现跨页面跨组件传参方式
var bus=new Vue()
bus.$on("colorchanage",e=>)bus.$emit(“colorchange”,‘red’)
bus.$off(“移除监听”)

<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>
// 新建一个js文件
// 导入vue
import Vue from 'vue'
// 创建vue的实例,
var bus = new Vue();
// 在导出实例
export default bus;


<button @click="$parent.bg='yellow'">黄</button>
<button @click="$parent.bg='purple'">紫</button>
<button @click="$parent.bg='hotpink'">粉</button>
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传参
$root 根组件
$refs.myref dom引用
$parent 父组件
vuex
cookie/localStorage/sessionStorage

v-model

是语法糖

//简写为
:value="w" @input="w=$event"
v=model="w"

//在组件中指定v-model
model:{
    prop:"num",
    event:"change"
}

nextTick

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

<template>
	<div class="about">
		<h1 id="myh">{{msg1}}</h1>
		<h1>{{msg2}}</h1>
		<button @click="getNew">新的</button>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				msg1:"11111",
				nsg2:"2222222"
			}
		},
		methods: {
			getNew(){
				this.msg1="000000";
				// 数据更新 ,等待dom也更新执行this.$nextTick的回调函数
				this.$nextTick(() => {
					this.msg2 = document.getElementById("myh").innerText
				})
			}
		}
	}
</script>

set

强制更新

<template>
	<ul style="text-align: left;">
		<li v-for="(item,index) in list" :key="index">{{item}}</li>
	</ul>
	<button @click="changeIt">改变</button>
</template>
<script>
	methods:{
	data() {
			return {
				list: ["学", "好", "前端", "月薪", "过万"]
			}
		},
	changeIt() {
			// 强制更新
			this.$set(this.list, 2, "js");
			console.log(this.list);
			// vue双向绑定原理,数据更新,视图更新,视图更新,数据更新  
			// 数据和视图的桥梁是:vue指令
			// 原理:通过Object.definePropery 劫持对象的getter获取,setter设置
			// 实现数组的更新,重新数组的方法原型来执行 ,push,pop,split
			// vue3双向绑定 使用 proxy代理
		},
}
</script>

混合

在每个组件创建完毕,输出当前的时间