Vue2和Vue3中常用的父组件调用子组件的方法。

vue2父组件调用子组件的方法.

方法1：通过$refs来进行调用。

子组件

    <script>
        export default {
            data() {
                return {
                    name: 'jack'
                }
            },
            methods: {
                childrenFuc() {
                    //在这里做某些子组件的操作。更菜子组件的值等等
                    this.name = 'Tom'
                }
            }
        }
    </script>

父组件

    <template>
        <childBody ref="childRef"></childBody>
        <button @click="handleClick">点击按钮</button>
    </template>
    <script>
        export default {
            data() {
                return {
                    name: 'jack'
                }
            },
            methods: {
                handleClick() {
                    //通过点击事件触发子组件的函数方法
                    this.$refs.childRef.childrenFuc();
                }
            }
        }
    </script>

方法2：使用$emit和$on的方法

在子组件的mounted或者created定义需要触发的函数

    <script>
        export default {
            data() {
                return {
                    name: 'jack'
                }
            },
            mounted() {

                //使用$nextTick方法，确保dom渲染完毕后加载该函数。
                this.$nextTick(function () {
                    this.$on("childrenFuc", () => {
                        //在这里做某些子组件的操作。更菜子组件的值等等
                        this.name = 'Tom'
                    })
                })

            }
        }
    </script>

父组件

    <template>
        <childBody ref="childRef"></childBody>
        <button @click="handleClick">点击按钮</button>
    </template>

    <script>
        export default {
            data() {
                return {

                }
            },
            methods: {
                handleClick() {
                    //触发子组件的方法。
                    this.$refs.childRef.$emit("childrenFuc");
                }
            },
        }
    </script>

Vue3父组件调用子组件的方法：

首先需要使用defineExpose把需要调用的方法暴露出来。

子组件：

    <script>
        import { defineExpose, ref } from 'vue';

        let state = 'jack';

        const childFunction = () => {
            console.log("子组件内容");
            state = 'Tom';
        }

        defineExpose({
            childFunction   //把子组件的方法暴露一个出口
        })
    </script>

父组件调用

   <template>
        <childBody ref="childRef"></childBody>
        <button @click="handleClick">点击按钮</button>
    </template>



    <script>
        import { ref, nextTick } from 'vue';
        const childRef = ref(null);  //首先把定义ref变量

        const handleClick = () => {
            //调用子组件暴露出来的方法
            childRef.value.childFunction();

            //当然为了保证数据加载的顺序，某些情况还是要使用nextTick的方法来进行包括，
            //确保数据的正确性。
            nextTick(() => {
                childRef.value.childFunction();
            })

        }
    </script>