Vue高级的定义
bus传参
利用vue空实例实现跨页面跨组件传参方式
var bus=new Vue()
bus.
o
n
(
"
c
o
l
o
r
c
h
a
n
a
g
e
"
,
e
=
>
)
b
u
s
.
on("colorchanage",e=>{}) 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>
混合
在每个组件创建完毕,输出当前的时间