SoFunction
Updated on 2025-04-05

$refs and $emit parent-child components interaction method

This article introduces the interaction method of $refs and $emit parent-child components. I will share it with you. I will just read the code without saying much nonsense:

<strong>Father's tone $refs (Pass the parent component's data to the child component) </strong><br><br><template>
 <div >
  <input type="button" name="" id="" @click="parentCall" value="Father's Son" />
  <hello ref="chil" />//hello component </div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
  parentCall () {
  this.$('I was sent from the parent element')
  }
  }
 }
</script>
/* :*/
<template>
 <div class="hello"></div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
  chilFn (msg) {
  alert(msg)
  }
  }
 }
</script>
<strong>Son tone the father $emit (Pass the data of the child component to the parent component)</strong>
//ps: Parent component// Subcomponents<!-- :-->
<template>
<div >
<hello @newNodeEvent="parentLisen" />
</div>
</template>
<script>
 import hello from './components/Hello'
 export default {
  name: 'app',
  'components': {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue is the value passed by the child component    alert(evtValue)
   }
  }
 }
</script>
<!-- :-->
<template>
<div class="hello">
<input type="button" name="" id="" @click="chilCall()" value="Son tone to father" /> 
</div>
</template>
<script>
 export default {
  name: 'hello',
  'methods': {
   chilCall(pars) {
    this.$emit('newNodeEvent', 'I'm from the child element')
   }
  }
 }
</script> 

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.