Detaillierte Erläuterung der Vue2.0-Übertragungsfunktion für Eltern-Kind-Komponenten

In diesem Artikel wird hauptsächlich das detaillierte Tutorial zur Übertragungsfunktion von Vue2.0-Eltern-Kind-Komponenten vorgestellt. Freunde, die es benötigen, können darauf zurückgreifen.

Was ist Vue.js

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks verwendet Vue ein inkrementelles Bottom-up-Entwicklungsdesign. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene. Sie ist nicht nur einfach zu starten, sondern auch einfach in Bibliotheken von Drittanbietern oder bestehende Projekte zu integrieren. Andererseits ist Vue auch in der Lage, komplexe Einzelseitenanwendungen zu betreiben, wenn es mit Einzeldateikomponenten und Bibliotheken kombiniert wird, die vom Vue-Ökosystem unterstützt werden.

Studiennotizen: Wenn in vue2.0 eine übergeordnete Komponente eine untergeordnete Komponente aufruft, möchte sie den Funktionskörper in der übergeordneten Komponente übergeben.

1. Durch Requisiten: Es muss sein von der untergeordneten Komponente übergeben Anwendbar bei der Übergabe von Parametern an die übergeordnete Komponente

// Übergeordnete Komponente.vue

<template>
 <p>
  <ok-input :params=&#39;number&#39; :callback=&#39;callbackNum&#39;></ok-input>
 </p>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {},
    callbackNum: function (x) {
     console.log(x);
    }
   };
  },
  methods: {
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

// Untergeordnete Komponente.vue

<template>
 <p>
   <input v-model=&#39;numVal&#39; @change=&#39;handleFun&#39;></input>
 </p>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleFun(val) {
     this.callback(val); // 将参数传回父组件中的回调函数
   }
  },
  components: {
   'el-input': Input,
  }
 };
</script>

2. Übergeben Sie $ emit: Gilt nur, wenn das aktuelle Operationsobjekt abgerufen wird

// 父组件.vue
<template>
 <p>
  <ok-input :params=&#39;inputs&#39; @change=&#39;handleAge&#39;></ok-input>
 </p>
</template>
<script type="text/ecmascript-6">
 import okInput from '../ok-input/okinput.vue';
 export default {
  props: {},
  data() {
   return {
    number: {}
   };
  },
  methods: {
   handleAge(evt) {
    console.log(evt.target.value); // 接收从子组件传过来的当前对象
   }
  },
  components: {
   'ok-input': okInput
  }
 };
</script>

// subcomponent.vue

<template>
 <p>
   <input v-model=&#39;numVal&#39; @blur=&#39;handleChange&#39;></input>
 </p>
</template>
<script type="text/ecmascript-6">
 import {Input, Select, Option, Button} from 'element-ui';
 import 'element-ui/lib/theme-default/index.css';
 export default {
  props: {
   params: {
    type: Object,
    default: {
     type: ''
    }
   },
   callback: {}
  },
  data() {
   return {
    x: 'hah',  
    numVal: ''
   };
  },
  methods: {
   handleChange(evt) {
    this.$emit('change', evt); // 将当前对象 evt 传递到父组件
   },
  },
  components: {
   'el-input': Input,
  }
 };
</script>

Verwandte Empfehlungen:

vue Detaillierte Erläuterung der Kommunikation von Nicht-Eltern-Kind-Komponenten im Ereignisbus

React.js Echtzeit-Kommunikationsbeispielanzeige für die Datenbindung von Eltern-Kind-Komponenten

Detaillierte Erläuterung der abstrakten öffentlichen Vue-Komponenten

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue2.0-Übertragungsfunktion für Eltern-Kind-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!