So verwenden Sie vue.js, um die Interaktion von Eltern-Kind-Komponenten mit $refs und $emit zu realisieren

In diesem Artikel wird hauptsächlich die Interaktionsmethode zwischen vue.js $refs und $emit Parent-Child-Komponenten vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Dieser Artikel stellt die Interaktionsmethode zwischen vue.js $refs und $emit Parent-Child-Komponenten vor. Ich möchte sie ohne weiteres mit Ihnen teilen:

<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>

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Informationen zum Zusammenführen von Objektwerten in JavaScript

So implementieren Sie die Überprüfung in Angular

So implementieren Sie die Tabellensortierung in Angular

So verwenden Sie Localstorage und Sessionstorage in Vue

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue.js, um die Interaktion von Eltern-Kind-Komponenten mit $refs und $emit zu realisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!