Les composants parents et enfants de Vue2.0 transfèrent des fonctions entre eux (avec du code)

Cette fois, je vais vous présenter la fonction de transfert mutuel des composants parent et enfant de Vue2.0 (avec code). Quelles sont les précautions pour la fonction de transfert mutuel des composants parent et enfant de Vue2.0. Ce qui suit est un cas pratique. Jetons un coup d'œil.

Qu'est-ce que Vue.js

Vue.js (prononcé /vjuː/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur. Contrairement à d'autres frameworks lourds, Vue Conçu avec un développement incrémental ascendant. La bibliothèque principale de Vue se concentre uniquement sur la couche de vue, qui est non seulement facile à démarrer, mais également facile à intégrer à des bibliothèques tierces ou à des projets existants. D'un autre côté, lorsque vous travaillez avec des composants à fichier unique et Vue Lorsqu'il est combiné avec des bibliothèques prises en charge par l'écosystème, Vue est également entièrement capable de fournir des pilotes pour des applications complexes d'une seule page.

Notes d'étude : Dans vue2.0, lorsqu'un composant parent appelle un composant enfant, il veut transmettre le corps de la fonction dans le composant parent

. 1. Via des accessoires : applicable lorsque les paramètres doivent être transmis des composants enfants aux composants parents

// Composant parent.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>

// sous-composant.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. Via $emit : Applicable uniquement lors de l'obtention de l'objet de l'opération en cours

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur PHP. Site chinois !

Lecture recommandée :

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!