Comment utiliser vue.js pour réaliser l'interaction des composants $refs et $emit parent-enfant

Cet article présente principalement la méthode d'interaction entre les composants vue.js $refs et $emit parent-child. Maintenant, je le partage avec vous et lui donne une référence.

Cet article présente la méthode d'interaction entre les composants vue.js $refs et $emit parent-child. J'aimerais le partager avec vous. Sans plus tarder, regardez simplement le code :

<strong>父调子 $refs （把父组件的数据传给子组件） </strong><br><br><template>
 <p id="app">
  <input type="button" name="" id="" @click="parentCall" value="父调子" />
  <hello ref="chil" />//hello组件
 </p>
</template>
<script>
 import hello from &#39;./components/Hello&#39;
 export default {
  name: &#39;app&#39;,
  &#39;components&#39;: {
   hello
  },
  methods: {
　　  parentCall () {
　　　　  this.$refs.chil.chilFn(&#39;我是父元素传过来的&#39;)
　　  }
  }
 }
</script>
/*Hello.vue :*/
<template>
 <p class="hello"></p>
</template>
<script>
 export default {
  name: &#39;hello&#39;,
  &#39;methods&#39;: {
　　  chilFn (msg) {
　　　　  alert(msg)
　　  }
  }
 }
</script>

<strong>子调父 $emit (把子组件的数据传给父组件)</strong>
//ps:App.vue 父组件
//Hello.vue 子组件
<!--App.vue :-->
<template>
　　<p id="app">
　　　　<hello @newNodeEvent="parentLisen" />
　　</p>
</template>
<script>
 import hello from &#39;./components/Hello&#39;
 export default {
  name: &#39;app&#39;,
  &#39;components&#39;: {
   hello
  },
  methods: {
   parentLisen(evtValue) { 
    //evtValue 是子组件传过来的值
    alert(evtValue)
   }
  }
 }
</script>
<!--Hello.vue :-->
<template>
　　<p class="hello">
　　　　<input type="button" name="" id="" @click="chilCall()" value="子调父" /> 
　　</p>
</template>
<script>
 export default {
  name: &#39;hello&#39;,
  &#39;methods&#39;: {
   chilCall(pars) {
    this.$emit(&#39;newNodeEvent&#39;, &#39;我是子元素传过来的&#39;)
   }
  }
 }
</script>

C'est moi ci-dessus, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

À propos de la fusion des valeurs d'objet en JavaScript

Comment implémenter la vérification dans Angular

Comment implémenter le tri de table dans Angular

Comment utiliser le stockage local et le stockage de session dans Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!