跨组件传参
- 利用vue空实例实现跨页面传参方式
- var bus = new Vue();
- bus.$on(“colorchange”,e=>{})
- bus.$emit(“colorchange”,‘red’)
- 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
- 组件上的 v-model默认使用 value值 input事件 来进行内容的双向绑定(也可以自定义值和事件名称)
- 是语法糖,简写模式:value=“w” @input=“w=$event” v=model=“w”
- 在组件中指定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
- 强制更新视图
- vue双向绑定原理,数据更新,试图更新,试图更新,数据更新
- 数据与视图桥梁是:所有的指令
- 原理:通过object.definePropery劫持对象的getter获取,setter设置
- 使用数组的更新,重写了数组的方法原型来实现.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)
}
})