1. from father to son
The way to pass the parent to the child is to pass the props attribute, and the child component receives the value passed from the parent component through the props attribute, and when the parent component passes the value, use v-bind to bind the variable name reserved in the child component to the data. The data can be.
Parent component code:
<template>
<div id="container">
<input type="text" v-model="text" @change="dataChange">
<Child :msg="text"></Child>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
text: "父组件的值"
};
},
methods: {
dataChange(data){
this.msg = data
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
Sub-component code:
<template>
<div id="container">
{
{msg}}
</div>
</template>
<script>
export default {
data() {
return {
};
},
props:{
msg: String
}
};
</script>
<style scoped>
#container{
color: red;
margin-top: 50px;
}
</style>
2. Son to Father
The child component needs to trigger a custom event in a certain way, such as a click event; the child component passes this.$emit('event name', the content carried) to the parent component, and the parent component listens at the corresponding position event
Sub-component code:
<template>
<div id="container">
<input type="text" v-model="msg">
<button @click="setData">传递到父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: "传递给父组件的值"
};
},
methods: {
setData() {
this.$emit("getData", this.msg);
}
}
};
</script>
<style scoped>
#container {
color: red;
margin-top: 50px;
}
</style>
Parent component code:
<template>
<div id="container">
<Child @getData="getData"></Child>
<p>{
{msg}}</p>
</div>
</template>
<script>
import Child from "@/components/Child";
export default {
data() {
return {
msg: "父组件默认值"
};
},
methods: {
getData(data) {
this.msg = data;
}
},
components: {
Child
}
};
</script>
<style scoped>
</style>
3. Passing values between non-parent and child components
Vue provides many ways to pass values between components. Parent-child components can directly use props and $emit. For large projects, use vuex. However, there is a non-parent-child component transfer method that is more suitable for use in small projects, namely bus bus mechanism.
To transfer values between non-parent and child components, you need to define a common public instance file bus.js as an intermediate warehouse to transfer values, otherwise the effect of transferring values between routing components cannot be achieved.
Public bus.js
import Vue from 'vue';
let install = (vue) => {
vue.prototype.bus = new Vue();
}
export default install;
3.1 Introduce bus in main.js, which is convenient for global use:
3.2 Then it can be used in component A and component B (example is for brother components to pass values)
Component A passes:
<template>
<button @click="handle">传递参数</button>
</template>
<script>
export default{
methods:{
handle(){
this.bus.$emit("hello", {
obj: 123 });
}
}
}
</script>
Component B receives:
//组件B接受组件A传递来的数据
created() {
this.bus.$on("hello", (data) => {
console.log(data);
});
},
Another method is also possible, first from the parent component, and then to the child component (equivalent to a public bus file)
4. Routing parameters
// 1.命名路由传参
this.$router.push({
name: 'user', params: {
user: 'nickname' }});
//页面接受
this.$route.params
// 2.查询参数传参
this.$router.push({
path: '/user', query: {
user: "nickname"}});
//页面接受
this.$route.query
5. Vuex Global Use Parameters
//新建store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
//main.js中引入，就可以全局使用state
import store from './store'
new Vue({
store,
render: h => h(App)
}).$mount('#app');
I'll add it when I get in touch more later.
Reference link:
Three commonly used value passing methods of Vue2.0, parent-to-child, child-to-parent, and non-parent-to-child components to pass values
[vue] Three methods for vue component to pass values
https://www.cnblogs.com/uimeigui/ p/13384503.html