- 01. The value transmission of components meets a pit
- 02. Pass value from parent component to child component
- 03. Pass value from child component to parent component
01. The value transmission of components meets a pit
- Notes on value transfer from child component to parent component
- Pay attention to the method to define the trigger event of the child component. First, you need to bind the corresponding event inside the child component in the parent component, and then make sure it is consistent with the one accepted by the parent control. Otherwise, the data cannot be transferred.
//stay area.vue Event triggering and data transfer this.$emit('onConfirm',true, selectVal) //In select-school.vue You need to bind the corresponding events inside the subcomponent on the subcomponent label, and the method names are consistent <!-- Region selector --> <optional :status='show' @onUpdate='onUpdate' @onConfirm='onConfirm'></optional>
- In doubt?
- If it is a component of the same level, how to transfer the data?
02. Pass value from parent component to child component
- The code of the parent component is as follows
<!-- Parent to child --> <!-- Internal writing of parent component --> <template> <view> <h2>Parent component</h2> <!-- Bind custom property transfer data --> <children style="color: #0000FF;" :value="valPar" ></children> </view> </template> <script> //Introduce subcomponents import children from "../../pages/ele/element-children1.vue" export default { data() { return { valPar:"Value passed from parent component" } }, components:{ //Register subcomponents children }, } </script>
- The code for the subcomponent is as follows
<!-- Parent to child --> <!-- Internal writing of sub components --> <template> <h2>Sub component received:{}</h2> </template> <script> export default { props:{ value:{ type:String, default:"Default" } }, data() { return { } }, } </script>
03. Pass value from child component to parent component
- The code of the parent component is as follows
<!-- Child to parent --> <!-- Internal writing of parent component --> <template> <view> <!-- Receive data passed by subcomponent --> <h2>Value received by parent component:{}</h2> <!-- Bind the internal corresponding event of the sub component on the sub component label and trigger the corresponding callback --> <children style="color: #0000FF;" @Transmit="handle"></children> </view> </template> <script> //Introduce subcomponents import children from "../../pages/ele/element-children2.vue" export default { data() { return { //Defining properties to receive data valueChild:"", } }, components:{ //Register subcomponents children }, methods:{ // Callback handle corresponding to internal trigger event of subcomponent handle(val){ this.valueChild=val; } } } </script>
- The code for the subcomponent is as follows
<!-- Child to parent --> <!-- Internal writing of sub components --> <template> <view> <h2>Subcomponent</h2> <!-- Click the button to trigger the event --> <button @click="handleTransmit">Click to pass value to parent component</button> </view> </template> <script> export default { data() { return { //Data to transfer valueParent: "Data passed from subcomponents" } }, methods: { handleTransmit() { // Event triggering and data transfer this.$emit("Transmit", this.valueParent) } } } </script>