【vue】vue组件间方法调用

父组件调用子组件的方法

在子组件中加上ref即可通过this.$refs.ref.method调用子组件的方法

父组件部分：

<template>
    <div id="parent">
        <v-child ref="vchild"></v-child>
    </div>
</template>

<script>
	export default {
	    name: "Parent",
	    data () {
	        return {
	            msg: "from parent"
	        }
	    },
	    components: {
	        vChild: () => import("./vChild.vue")
	    },
	    methods: {
	        this.$refs.vchild.childMethod(this.msg); 
	    }
	}
</script>

子组件部分：

<template>
    <div id="child">
        {{msg}}
    </div>
</template>

<script>
	export default {
	    name: "Child",
	    props: ["msg"],
	    data () {
	        return {
	            msg: ""
	        }
	    },
	    methods: {
	        childMethod (msg) {
	            this.msg = msg
	        }
	    }
	}
</script>

---

子组件调用父组件方法（方式一）

父组件部分：

<template>
    <div id="parent">
        <v-child @parentHandle="childHandle"></v-child>
    </div>
</template>

<script>
	export default {
	    name: "Parent",
	    data () {
	        return {
	            parentMsg: "from parent"
	        }
	    },
	    components: {
	        vChild: () => import("./vChild.vue")
	    },
	    methods: {
	        childHandle(msg){
	            console.log(msg)
	        }
	    }
	}
</script>

父组件中的 childHandle 方法以 parentHandle 名称传递给子组件

子组件部分:

<template>
    <div id="child">
        <input type="text" v-model="msg" @change="inputChange" />
    </div>
</template>

<script>
	export default {
	    name: "Child",
	    data () {
	        return {
	            msg: ""
	        }
	    },
	    methods: {
	        inputChange () {
	            this.$emit("parentHandle", this.msg)
	        }
	    }
	}
</script>

---

子组件调用父组件方法（方式二）

父组件部分：

<template>
    <div id="parent">
        <v-child></v-child>
    </div>
</template>

<script>
	export default {
	    name: "Parent",
	    data () {
	        return {
	            parentMsg: "from parent"
	        }
	    },
	    provide(){
	        return {
	            parentHandle: this.childHandle
	        }
	    },
	    components: {
	        vChild: () => import("./vChild.vue")
	    },
	    methods: {
	        childHandle(msg){
	            console.log(msg)
	        }
	    }
	}
</script>

父组件通过 provide 将数据传递给子组件。

子组件部分：

<template>
    <div id="child">
        <input type="text" v-model="msg" @change="inputChange" />
    </div>
</template>

<script>
	export default {
	    name: "Child",
	    inject: ["parentHandle"],
	    data () {
	        return {
	            msg: ""
	        }
	    },
	    methods: {
	        inputChange () {
	            this.parentHandle(this.msg)
	        }
	    }
	}
</script>

子组件通过 inject 接收父组件的数据。

该方法可跨越多层传递数据。

---

子组件间方法调用

子组件间方法调用可以通过父组件中转的方法。比如A、B为子组件，C为父组件，
A要调用B的方法，方法是A调用C的方法，然后C在被A调用的方法中调用B的方法。