1. Father passes on to son
Defined in subcomponentspropsField, type is an array (if you need to limit the field value type, it can also be defined as the form of an object). In the following example, the parent component mounts the child componentHelloWorld, on the component labeltitleAssignment, subcomponentsHelloWorlddefinitionprops, there is a value insidetitle, so that the child component can use the parent component's value.
Parent component
<template>
<div>
<HelloWorld :title="msg" />
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
components: {
HelloWorld,
},
};
</script>
Subcomponents
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props:["title"],
data() {
return {};
},
};
</script>
2. The son passes on to the father
The child passes the parent, and an event needs to be triggered in the child component. In the event, the call is called$emit('Parent component' method name', 'Passed value'), and then in the parent component, receive the passed value through a custom event.
Subcomponents
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
this.$emit("childEvent", );
}
},
};
</script>
Parent component
<template>
<div>
<HelloWorld @childEvent="parentEvent" :title="msg" />
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
methods: {
parentEvent(e) {
(e);
},
},
components: {
HelloWorld,
},
};
</script>
3. Brother component passes value
1. Create a new one firstFile, ininsidenewoneVueAn example, acts as an intermediate layer for transmitting data.
import Vue from 'vue'; export default new Vue;
2. Introduced in component A,passbus.$emit('event name','parameter')Pass parameters
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
import bus from "../publicFn/";
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
bus.$emit("childEvent", );
}
},
};
</script>
3. In component BmountedUsed in cycles$on('event name', function(){})take over
<template>
<div id='swiper'>
<button>I'm the button</button>
</div>
</template>
<script>
import bus from "../publicFn/";
export default {
name:'Swiper',
data (){
return {
}
},
mounted(){
bus.$on("childEvent", (e) => {
(e)
})
}
}
</script>
4. Parent component uses child component data and methods
1. Write on the subcomponent labelrefproperty
2. Parent component passesthis.$. method nameorthis.$.Attribute namethe way to access subcomponents.
Parent component
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">I'm a father</button>
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
methods: {
parentEvent() {
this.$();
(this.$);
},
},
components: {
HelloWorld
},
};
</script>
Subcomponents
<template>
<div class="hello">
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
("I am a child component");
}
},
};
</script>
5. The child component uses the parent component's data and methods
In subcomponents, you can use$parentAccessing the data and methods of its parent component, if it is multi-nested, you can also use multi-layers.$parent。
Parent component
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
methods: {
parentEvent() {
("I'm the parent component's method");
},
},
components: {
HelloWorld
},
};
</script>
Subcomponents
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
(this.$)
this.$();
}
},
};
</script>
6. Vuex pass value
VuexIt's a specialState management mode of application development. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules. Generally, small projects do not need to be used.
6.1, define store
import Vue from "vue";
import Vuex from "vuex";
(Vuex);
export default new ({
state: {
school: "Tsinghua University",
a:"nice"
},
getters: {
returnVal(state) {
return + ;
},
},
mutations: {
changeSchool(state, val) {
= val;
('Modification was successful');
},
},
actions: {},
modules: {}
});
6.2, Mount
import Vue from 'vue';
import App from './';
import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/";
import publicFn from "./publicFn/publicFn";
= false
const url = .VUE_APP_URL;
.$url = url;
.$publicFn = publicFn;
(ElementUI);
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
6.3, use
<template>
<div class="hello">
<h1 @click="add">{{ title }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: ["title"],
data() {
return {
age:18
};
},
methods: {
add(){
(this.$);//Get the value //this.$('changeSchool', 'Peking University');//Modify the value // (this.$)// Get the filtered value }
},
};
</script>
7. Routing value
7.1 Passing values through query
Note: This method will not lose the parameters of the page refresh, and the parameters will be displayed after the address bar.http://localhost:9000/#/conter?id=10086&name=%E9%B9%8F%E5%A4%9A%E5%A4%9A
Page A
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">Jump</button>
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
methods: {
parentEvent() {
this.$({
path:"/conter",
name:'conter',
query:{
id:10086,
name:"Pengduoduo"
}
})
},
},
components: {
HelloWorld
},
};
</script>
Page B
<template>
<div id='conter'>
</div>
</template>
<script>
export default {
name:'conter',
data (){
return {
}
},
created (){
(this.$, this.$);
},
}
</script>
7.2 Passing values through params
Note: This method will be refreshed with the parameters of the page and it can exist after receiving it.sessionStorage。
Page A
<template>
<div>
<HelloWorld :title="msg" ref="hello" />
<button @click="parentEvent">Jump</button>
</div>
</template>
<script>
import HelloWorld from "../components/";
export default {
name: "Home",
data() {
return {
msg: "Search for Music",
};
},
methods: {
parentEvent() {
this.$({
path:"/conter",
name:"conter",
params:{
id:10086,
name:"Pengduoduo"
}
})
},
},
components: {
HelloWorld
},
};
</script>
Page B
<template>
<div id='conter'>
</div>
</template>
<script>
export default {
name:'conter',
data (){
return {
}
},
created (){
(this.$, this.$);
},
}
</script>
This is the end of this article about the seven ways to pass Vue to Vue. For more related content on the content of the way to pass Vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!