Article Directory
There is such a situation, in the parent component, the child component is used, and now I want to pass some values from the parent to the child, or pass some values from the child to the parent.
In order to solve the above problems, props are usually used to achieve. The value of props can be two types: string array, object;
father to son
Here we first introduce the array situation:
In the subcomponent, define props:
<template>
<div>{
{parentStr}}</div>
</template>
<script>
export default {
props: ["parentStr"]
};
</script>
Then in the parent component, when using the component, just pass in this value:
<template>
<layout_head parentStr="这个是父组件传递的信息"/>
</template>
<script>
import layout_head from "./head.vue";
export default {
components: {
aside_menu ,layout_head}
};
</script>
object:
Usually you want each prop to have a specific value type. At this time, props can be listed in the form of objects, and the names and values of these properties are the respective names and types of props:
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object
}
Notice
- If there are multiple data that need to be transmitted, define multiple items in props, and then set these values when the parent component uses this child component.
- HTML is not case-sensitive, so when using the DOM template, the props name of the camel case command should be separated by a dash: myCom is written as my-com;
- In the above example, the value passed by the parent is hardcoded, or it can be dynamic, using v-bind to achieve: <layout_head :parentStr="str"/>
- If you pass numbers, booleans, arrays, objects directly instead of using v-bind, then only strings are passed
one-way data
There are two things to understand:
- In Vue2.x, the transfer of data is one-way, that is to say, it can only be passed from parent to child, not from child to parent.
- At that time, in JS, both objects and arrays were reference types, pointing to the same space;
Because of these two points, directly modifying the value passed by the parent will violate the first rule due to the second reason. Therefore, if you directly modify the passed value, an error will be reported.
Therefore, if the value passed by the parent needs to be modified in the child, the usual method is: (do not directly manipulate the passed value)
export default {
props: ["parentStr"],
data() {
return {
sub_parentStr: this.parentStr
};
}
};
child's father
After understanding the one-way data, I understand that in Vue2.x, only father-to-son is allowed, and son-to-father is not allowed.
If you really want to transfer data to the parent in the child, you can use the $emit method.
Remember: the principle of one-way data cannot be violated, so, strictly speaking, the information transmitted from the child to the father is passed on from the child itself, not from the father.
Of course, you can use a variable to save the information passed by the parent, and then pass this variable to the parent, and the parent assigns it to the previous variable: the writing method
in the child component:
<script>
export default {
props: ["collapsed"],
data() {
return {
sub_collapsed: this.collapsed
};
},
methods: {
//改变sub_collapsed的值
sendCollapsed: function() {
this.sub_collapsed = !this.sub_collapsed;
//讲sub_collapsed的值，传递给父组件
this.$emit("receiveCollapsed", this.sub_collapsed);
} //~end sendCollapsed
}
};
</script>
Writing in the parent component:
...
<layout_head :collapsed="collapsed" @receiveCollapsed="receiveCollapsed" />
...
<script>
import layout_head from "./head.vue";
export default {
data() {
return {
collapsed: false
};
},
components: {
layout_head },
methods: {
//从子组件中，接收collapsed的变化
receiveCollapsed: function(sub_collapsed) {
this.collapsed = sub_collapsed;
}//~end receiveCollapsed
}
};
</script>
Finally, it needs to be explained: the first parameter of the $emit() method is a custom event (the value written when the child component is called in the parent component), and then the second parameter (or the nth parameter, or possibly none) are the values to be passed.
v-model method
There is a more convenient way: use v-model
based on the above method, only need to modify in the subcomponent:
this.$emit("input", this.sub_collapsed);//这里的input是固定的
Explanation: This input is a special event name, and there is no need to perform @input="receiveCollapsed" operation in the parent component.
Then when the parent component calls the child component:
<layout_head :collapsed="collapsed" v-model="collapsed" />
At this time, the parent component does not need to define the receiveCollapsed method.
The results of the two methods are the same. Although the v-model method is simple, it is only suitable for assignment.