Attention to value transmission of uni components

Table of contents

  • 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:{{value}}</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:{{valueChild}}</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>
    

Tags: Front-end Vue

Posted on Sun, 24 May 2020 10:38:14 -0400 by Stoneguard