Le composant Vue modifie la méthode de données de l'instance racine (avec du code)

Ce que cet article vous apporte concerne la méthode de données du composant Vue pour modifier l'instance racine (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Idées :
1 Écoutez les événements à l'intérieur du composant et émettez l'événement
2 Écoutez l'événement émis par l'émission sur le composant
3 Lorsque l'événement se produit, exécutez la fonction correspondante pour modifier l'instance racine Data

implémentation :
1 Écoutez l'événement d'entrée dans la zone de saisie à l'intérieur du composant et liez l'événement d'entrée
fonction triggerInput
2 Déclenché lors de la saisie de contenu dans la zone de saisie Fonction triggerInput
La fonction triggerInput émet un événement d'édition et la valeur de la zone de saisie vers l'extérieur
3 Écoutez cet événement d'édition sur le composant et liez la fonction triggerEdit à l'événement d'édition
4 À ce moment , la fonction triggerEdit, la fonction triggerEdit sera déclenchée Vous pouvez modifier les données sur l'instance racine

Remarque :
1 Le premier paramètre de la fonction triggerEdit est la clé des données de l'instance racine que vous souhaitez modifier
2 Le deuxième paramètre $event est Routine, avec ce paramètre, vous pouvez obtenir la
valeur de la zone de saisie émise à l'intérieur du composant
3 dans la fonction triggerEdit. Vous pouvez déconnecter les événements qui se sont produits à l'intérieur. le composant dans la fonction triggerEdit

nbsp;html>

  
    <meta>
    <title></title>
    <script></script>
  
  
    <div>
      根实例的 data message：{{message}}
      <br>
      根实例的 data name：{{name}}
      <br>
      message:
      <component-demo1></component-demo1>
      name:
      <component-demo1></component-demo1>
    </div>
  
  <script>
    Vue.component(&#39;component-demo1&#39;, {
      template: `
        <div>
          组件内的 input：
          <input
            v-on:input=&#39;triggerInput&#39;
          >
        
      `,
      methods: {
        triggerInput: function (e) {
          this.$emit(&#39;edit&#39;, e.target.value)
        },
      },
    })
    var app = new Vue({
      el: &#39;#app&#39;,
      data: {
        message: &#39;hello vue&#39;,
        name: &#39;gua&#39;,
      },
      methods: {
        triggerEdit: function (key, value) {
          this[key] = value
          console.log(event)
        }
      }
    })
  </script>

[Recommandations associées : Tutoriel vidéo JavaScript]

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!