Comment implémenter la communication entre les composants et les composants parent-enfant dans Vue2.0

Cet article présente principalement l'explication détaillée de l'apprentissage de Vue 2.0, des composants Vue et de la communication entre les composants parent-enfant. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'oeil

Que sont les composants ?

Les composants en vue font en fait partie de la page, tout comme tous les composants de l'ordinateur (comme le disque dur, le clavier, la souris). Ils ont une logique ou une interface indépendante, et en même temps. peut Les règles d'interface spécifiées sont intégrées les unes aux autres pour devenir une application complète.

La page est composée de parties comme celle-ci, telles que la navigation, les listes, les fenêtres pop-up, les listes déroulantes, etc. La page n'est qu'un conteneur pour ces composants. Les composants sont librement combinés pour former une interface entièrement fonctionnelle lorsqu'un composant n'est pas nécessaire ou que vous souhaitez le remplacer, vous pouvez le remplacer et le supprimer à tout moment sans affecter le fonctionnement du. l'intégralité de la demande.

L'idée principale de la composantisation frontale est de diviser une chose énorme et complexe en petites choses avec une granularité raisonnable.

Quels sont les avantages de l'utilisation de composants ?

1. Améliorer l'efficacité du développement
2. Faciliter la réutilisation
3. Simplifier les étapes de débogage
4. Améliorer la maintenabilité de l'ensemble du projet
5. 🎜>

Composant dans vue

Le composant dans vue est une balise personnalisée, et le compilateur de vue.js lui ajoute des fonctions spéciales

Composant dans vue Vous pouvez également étendre les éléments HTML natifs pour encapsuler du code réutilisable

Composants de base des composants : structure de style, logique de comportement, données

Composant enregistré

Global l'enregistrement

peut être utilisé dans n'importe quel modèle, vous devez vous inscrire avant utilisation

Syntaxe : utilisez Vue.component (nom du composant, objet d'option)

Nom du nom du composant convention : camel case, kebab

Utilisation de composants en html : utilisez la convention de dénomination kebab

Par exemple, enregistrez Vue.compontent('my-compontent',{}) , lorsque vous utilisez 34dc2066db8347bc50805b7201f9b5e816988d5740177eb73253eb9e6eace716

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        
      }
    },
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" value="">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

lors de son utilisation, il vous suffit d'appeler ce composant sur la page pour l'utiliser et il peut être réutilisé.

Component.png

Inscription locale

Enregistré via l'objet options dans l'instance du composant, uniquement là où Les composants enregistrés localement à l'aide de

<p id="app">
    <h2>自定义下拉框</h2>
    <cus-list></cus-list>
    <cus-list></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  new Vue({
    el:"#app",
    components:{
      &#39;cus-list&#39;:{
        template:`
          <section>
            <p>
              <p>
                <input type="text">
                <input type="button" name="" value="">
                <span></span>
              </p>
            </p>
          </section>
        `
      }
    },
    data:{
      
    }
  })
</script>

dans la portée enregistrée ne peuvent être utilisés que dans la portée de l'instance actuelle et peuvent également être réutilisés dans la portée. L'effet est le suivant.

Component.png

Communication entre les composants parent et enfant

Communication entre parent et enfant composants

Composant parent ===>Composant enfant (à l'aide d'accessoires)

La portée de l'instance du composant est isolée et le composant enfant ne peut pas utiliser directement les données du composant parent .

Vous pouvez utiliser des attributs personnalisés pour lier des données sur le composant et utiliser des accessoires pour personnaliser le nom de l'attribut à afficher dans le composant.

En d'autres termes, rappelez-vous une phrase, lorsqu'un composant parent transfère une valeur à un composant enfant, il s'agit d'ajouter un attribut au composant lors de l'appel du composant, puis d'utiliser des accessoires pour le recevoir dans le composant. .Il peut être utilisé en fonction du nom de l'attribut dans le composant.

<p id="app">
  <h2>自定义下拉框</h2>
  <cus-list btn-value="查询"></cus-list>
  <cus-list btn-value="搜索"></cus-list>
</p>
<script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
<script>
  Vue.component(&#39;cus-list&#39;,{
    data(){

    },
    props:[&#39;btnValue&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text">
            <input type="button" name="" :value="btnValue">
            <span></span>
          </p>
        </p>
      </section>
    `
  })
  new Vue({
    el:"#app",
    data:{
      
    }
  })
</script>

Effet de page

props pass value.png

Le composant enfant communique avec le composant parent

Sous-composant ===》Le composant parent

doit utiliser une heure personnalisée. Le composant parent utilise $on pour écouter les événements personnalisés et $emit des déclencheurs. ce qui intéresse le composant parent.

1. Définir le contenu de l'événement dans le sous-composant38831128641c27964a380100f1e34c9d{{item}}bed06894275b65c1ab86501b08a632eb

2. Événement personnalisé v-on dans le composant parent pour recevoir v-on:receive="changeValue"

3 Lorsque l'événement du composant enfant est déclenché, $emit informe le composant parent de. this.$ submit("receive",item);

4. Le composant parent fournit des commentaires correspondants basés sur des événements personnalisés changeValue:function(value){this.val = value;}

Regardez le cas suivant : lorsque vous cliquez sur Entrée, une zone de liste déroulante apparaît, sélectionnez la liste correspondante et le contenu de la liste apparaît dans la zone de saisie.

  <p id="app">
    <h2>自定义下拉框</h2>
    <cus-list select-Value="搜索" v-bind:list="list1" >
    </cus-list>
  </p>
  <script type="text/javascript" src=&#39;https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js&#39;></script>
  <script type="text/javascript">
  // 全局注册组件
  Vue.component(&#39;cus-list&#39;,{
    data(){
      return {
        selectShow:false,
        val:&#39;&#39;
      }
    },
    props:[&#39;selectValue&#39;,&#39;list&#39;],
    template:`
      <section>
        <p>
          <p>
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" name="" :value="selectValue">
          </p>
          <list-li :list="list" v-show="selectShow" v-on:receive="changeValue"></list-li>
        </p>
      </section>
    `,
    methods:{
      changeValue:function(value){
        this.val = value;
      }
    }
  })
  Vue.component(&#39;list-li&#39;,{
    props:[&#39;list&#39;],
    template:`
        <ul>
          <li v-for="item of list" @click="clickLi(item)">{{item}}</li>
        </ul>
    `,
    methods:{
      clickLi:function(item){
        this.$emit("receive",item);
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      list1:[&#39;宋仲基&#39;,&#39;余文乐&#39;,&#39;鹿晗&#39;,&#39;陈小春&#39;,&#39;黄晓明&#39;,&#39;易烊千玺&#39;]
    }
  })
  </script>

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment résoudre le conflit entre la syntaxe Django et Vue

Comment explorer les images de sites Web dans nodejs

À propos des compétences d'utilisation d'ES6/JavaScript (tutoriel détaillé)

Comment définir dynamiquement le texte d'invite d'un espace réservé à l'aide de l'applet WeChat

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!