Ref communicates with parent/children

Ref calls the child component method and passes the parameter

In the parent component code, the child component object can be retrieved in this.$ref by setting the attribute ref on the label of the child component, and then variables and methods in the child component can be invoked to trigger changes in the child component

The parent calls the child through ref

Parent component code

<! -- Parent component --><template>
    <div class="family">
        <div @click="father_methods">
            <div>Local arguments to the parent component :{{father_string}}</div>
            <button @click="change_son">Ref gets the child component instance and fires its function</button>
        </div>
        <! -- Subcomponent -->
        <Son ref="child1"></Son>
        <! -- Subcomponent -->
    </div>
</template>

<script>
import Son from "./Son";
export default {
    name: "HelloWorld",

    data () {
        return {
            father_string: "father_string"}; },components: {
        Son,
    },
    methods: {
        // Parent component method
        father_methods (str) {
            this.father_string = str
        },
        // Change_son calls child component internal methods and parameters
        change_son () {
            this.$refs.child1.son_methods('changed_from_father')}}};</script>
Copy the code

Subcomponent code

<! -- Subcomponent --><template>
    <div>
        <div>Local arguments to child components {{son_string}}</div>
    </div>
</template>

<script>
export default {
    name: "Son",
    data () {
        return {
            son_string: "son_string"}},methods: {
        /* This method is then called by the parent component */
        son_methods (str) {
            this.son_string = str
        }
    }
};
</script>


Copy the code

Ref call effect

Click the button of the parent component, trigger change_son, trigger son_methods of the child component and pass the parameters to the child component, as shown in the picture

In Vue2, there is not much difference between this.$children and this.$refs calls in the parent component

Note that Vue3 removes the $children attribute from this

$parent = $parent = $parent = $parent = $parent

<script>
export default {
    /* Subcomponent */
    name: "Son",
    data () {
        return {
            son_string: "son_string"}},methods: {
        /* This method is then called by the parent component */
        son_methods (str) {
            this.son_string = str
        }
    },
    mounted () {
        // Print to see the parent component instance
         console.log(this.$parent)
    }
};
</script>
Copy the code

By printing in the background, we can see that the object holds the variables and parameters of the parent component

The child goes through the parent method

We directly call the parent component’s methods and pass parameters in the middle of the child component’s mounted life

 mounted () {
         /* Mounted */
        this.$parent.father_methods('changed_by_son')}Copy the code

On the left side of the figure, the parameters of the parent component are indeed modified for the quilt component

conclusion

Through ref and parent/parent /parent /children, you can get the parent component instances and access them easily and quickly, call their methods and parameters, according to the actual situation, and cooperate with other communication methods to develop gracefully, efficiently and happily ~