Übergeordnete und untergeordnete Vue2.0-Komponenten übertragen Funktionen untereinander (mit Code)

Dieses Mal werde ich Ihnen die gegenseitige Übertragungsfunktion der übergeordneten und untergeordneten Vue2.0-Komponenten vorstellen (mit Code). Was sind die Vorsichtsmaßnahmen für die gegenseitige Übertragungsfunktion der übergeordneten und untergeordneten Vue2.0-Komponenten? Das Folgende ist ein praktischer Fall.

Was ist Vue.js

Vue.js (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks bietet Vue Entworfen mit inkrementeller Bottom-up-Entwicklung. Die Kernbibliothek von Vue konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann. Andererseits beim Arbeiten mit einzelnen Dateikomponenten und Vue In Kombination mit ökosystemunterstützten Bibliotheken ist Vue auch vollständig in der Lage, Treiber für komplexe Single-Page-Anwendungen bereitzustellen.

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: anwendbar, wenn Parameter von untergeordneten Komponenten an übergeordnete Komponenten übergeben werden müssen

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

// subcomponent.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. Über $emit: Nur anwendbar, wenn das aktuelle Vorgangsobjekt abgerufen wird

// Subcomponent.vue

// 父组件.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>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln zu PHP Chinesische Website!

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

Empfohlene Lektüre:

Das obige ist der detaillierte Inhalt vonÜbergeordnete und untergeordnete Vue2.0-Komponenten übertragen Funktionen untereinander (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!