今天我介绍一下vue的8种传值方式:
image.png
这里我们只介绍:
- parent
- provide/inject
- EventBus
- listeners
children/parent
注意:vue3以后没有$children了
- 组件
<template>
<div class="view">
<div @click="changeParent">{{ name }}</div>
</div>
</template>
<script>
export default {
data() {
return {
name: "前端开发攻城狮",
list: [],
};
},
mounted() {
console.log("父类", this.$parent);
},
methods:{
changeParent(){
this.$parent.nick = '参见Vue叔叔'
}
}
};
</script>
- 父类
<template>
<div>
<div>你好,Vue。</div>
<test></test>
<div>{{ nick }}</div>
</div>
</template>
<script>
import test from "./views/component";
export default {
name: "App",
components: {
test
},
data() {
return {
nick: "",
};
},
mounted() {
console.log("子类", this.$children);
this.$children. name = '前端开发深似海'
},
};
</script>
provide/inject
1.组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String,
abc: String
},
inject: ["self", "param", "clickFuntion"], // "abc" 获取不到,因为props中已经定义了。
mounted() {
console.log("inject param:", this.$options.inject);
this.$options.inject.forEach(e=>console.log(`key: ${e} __ `,this[e]));
this.clickFuntion(this); // 执行改函数
}
};
</script>
2.父类
<template>
<div class="view">
<HelloWorld :msg="name" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
var list = [1, 2, 3];
export default {
name: "App",
components: {
HelloWorld
},
data() {
return {
nick: "前端开发攻城狮",
name: "阳光派小伙",
dsdasd: "ddddddd"
};
},
computed: {
getList() {
return list;
}
},
provide: {
self: this,
param: list,
abc: '1234',
clickFuntion: (children)=>{
console.log('父类里面:',children.msg ?? '执行某些事情');
}
},
methods: {
getdata() {
this.name = "阳光派小伙,小军";
}
}
};
</script>
注意: provide 可以透传多个层级,实现儿子与祖父的传值调用
EventBus(可用于一对多传值)
- 创建EventsBus单例
// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()
- 子组件/孙子组件/兄弟组件 来接收通知
<template>
<div>计算和: {{count}}</div>
</template>
<script>
import { EventBus } from './event-bus.js'
export default {
data() {
return {
count: 0
}
},
mounted() {
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
</script>
- 发送通知
<template>
<div>
<button @click="additionHandle">+加法器</button>
</div>
</template>
<script>
import {EventBus} from './event-bus.js'
console.log(EventBus)
export default {
data(){
return{
num:1
}
},
methods:{
additionHandle(){
EventBus.$emit('addition', {
num:this.num++
})
}
}
}
</script>
网友评论