Passing from father to son: using props
//子组件内容
<template>
<div id="app">
<div>姓名：{
{ name }}</div>
<div>年龄：{
{ age }}</div>
</div>
</template>
<script>
export default {
props: ["name", "age"],
};
</script>
parent component
<template>
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
</template>
<script>
export default {
data(){
return {
newname:'李雷'，
newage:15
}
}
}
</script>
The principle is to bind two properties on the parent component through props settings and use them as properties of the child component.
//Subcomponent
data(){ return { myname:this.name } }
Pass from son to father: use $emit
//Subcomponent
<template>
<div id="app">
<div>Name: {
{ name }}</div>
<div>Age: {
{ age }}</div>
<div>Name 1: {
{ myname }}</div>
<div>Age 1: {
{ myage }}</div>
<button @click="son1emit">Click to send data</button>
</div>
</template>
export default { data() { return { myname: "李思", myage: 23, }; }, props: ["name", "age"], methods: { son1emit() { this.$emit("son1data", { name:this.myname, age: this.myage }); }, }, };
</script>
//Parent component
//Template
<son1 :name="newname" :age="newage" @son1data="getdata"></son1>
//
Methods: { getdata(val) { this.son1_name = val.name ; this.son1_age = val.age; } }, //Attribute data() { return { newname: "Zhang San", newage: 22, son1_name: "", son1_age: "", }; },
The principle of this method is to pass the value of the second parameter through the $emit of the child component, and then monitor the $on event of the parent component to obtain relevant data.
Another available method is the $children, $parent attributes on vc, click on them.
Ancestral grandson (middle layer disconnected): use provide==>inject
//The provide option can define data for other descendant components using
provide() { return { address: this.address, }; }, data() { return { address: "Nanjing Yuhuatai", }; },
The above is the exported content of the ancestor component, and the following is the content of the grandchild component.
<template>
<div>
<p>Address: {
{ myaddress }}</p>
</div>
</template>
<script>
export default { data() { return { myaddress: this.address, }; }, //Get the data of the main component through injection injection : ["address"], }; </script>
Value transfer between sibling components:
Event bus: You can create a Vue instance as an event center for communication between sibling components. In a sibling component, trigger the custom event through $emit, then listen to the event on the event bus, and receive the passed value through $on in another sibling component.
// main.js file
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({ render: h => h(App), beforeCreate() { // You need to add a property globally Vue.prototype.$bus = this } }).$mount('#app')
// Father.vue file
<template>
<div id="father">
<button @click="btn">I want to pass data to the Brother component</button>
</div>
</template>
<script>
export default {
name: "Father",
methods: {
btn() {
this.$bus.$emit("change", 66666);
},
},
};
</script>
// Brother.vue 文件
<template>
<div id="brother"></div>
</template>
<script>
export default {
name: "Brother",
mounted() {
this.$bus.$on("change", (msg) => {
console.log(msg);
});
},
};
</script>
Passing values between components:
Passed from father to son: props,
From son to father: $emit,
Ancestral grandson: provide==>inject,
Sun Chuanzu: $parent, or pass a method (function) in provide, pass it directly.
Communication between brothers: event bus