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.