Looks good with ref
Use vuex for more complex
If you allow child components to be referenced with the ref attribute, you can call child methods from the parent
The following is a sample program.
The test method of the parent component App.vue calls the method of the child component Test.vue using $refs.
App.vue
<template>
<div id = "app">
<test ref = "test"></test>
<button @ click = "test">test</button>
</div>
</template>
<script>
import Test from "./Test.vue"
export default {
methods: {
test () {
console.log ("parentMethod")
this. $refs.test.childMethod ()
},
},
components: {Test}
}
</script>
For small things, you can also call child component methods with $refs like
this. $refs.foo.bar ()
.However, direct data reference between components is not recommended.
Component-Vue.js
So basically
$emit from child to parent
Parent to child props
It may be good to pass data with.
However, props cannot directly call child component methods.
Therefore, there is a way to use EventBus as shown below to coordinate processing between components.
Communication other than parent-child