La méthode de communication parent-enfant dans les composants VueJs

Cet article présente principalement la méthode de communication parent-enfant dans les composants VueJs. Il est très bon et a une certaine valeur de référence. Les amis dans le besoin peuvent se référer au

Composant (Communication père-enfant)

1. Résumé

Définir un autre composant au sein d'un composant, appelé composant parent-enfant.

Mais veuillez noter : 1. Les composants enfants ne peuvent être utilisés qu'à l'intérieur du composant parent (écrit dans le modèle du composant parent) ; Les données sur la portée de chaque instance de composant sont indépendantes ; Comment compléter la communication entre père et fils, en une phrase simple : accessoires vers le bas, événements vers le haut : le composant parent transmet les données vers le bas au composant enfant via props , le composant enfant envoie

au composant parent via des événements : Props

du fils au parent : Enfant : $emit(eventName) Parent $on(eventName)

Le parent accède à l'enfant : ref

Les trois cas suivants seront expliqués :

2. Passer de père en fils : Accessoires

La portée de l'instance de composant est isolée. Cela signifie que vous ne pouvez pas (et ne devez pas) référencer les données du composant parent directement dans le modèle du composant enfant. Pour permettre au composant enfant d'utiliser les données du composant parent, vous devez utiliser l'option props du composant enfant L'utilisation de Prop pour transférer des données inclut des formulaires statiques et dynamiques.

1. Accessoires statiques

Effet :

<script src="https://unpkg.com/vue"></script>
<p id="example">
 <parent></parent>
</p>
<script>
 //要想子组件能够获取父组件的，那么在子组件必须申明:props
 var childNode = {
  template: &#39;<p>{{message}}</p>&#39;,
  props: [&#39;message&#39;]
 }
 //这里的message要和上面props中值一致
 var parentNode = {
  template: `
   <p class="parent">
   <child message="我是"></child>
   <child message="徐小小"></child>
   </p>`,
  components: {
   &#39;child&#39;: childNode
  }
 };
 // 创建根实例
 new Vue({
  el: &#39;#example&#39;,
  components: {
   &#39;parent&#39;: parentNode
  }
 })
</script>

Convention de dénomination :

Pour la déclaration des accessoires Pour les attributs, dans le modèle HTML parent, le nom de l'attribut doit être écrit avec un tiret

Lorsque l'attribut enfant des accessoires est déclaré, il peut être écrit avec une petite casse chameau ou un tiret ; tandis que le modèle enfant utilise from Lors de la transmission des variables du parent, vous devez utiliser la casse camel correspondante

Que signifie la phrase ci-dessus ?

Si nous changeons myMessage dans childNode en {{my-message}}, regardez les résultats en cours :

<script>
 //这里需要注意的是props可以写成[&#39;my-message&#39;]或者[&#39;myMessage&#39;]都是可以的
 //但是template里的属性名，只能是驼峰式{{myMessage}}，如果也写成{{my-message}}那么是无效的
 var childNode = {
  template: &#39;<p>{{myMessage}}</p>&#39;,
  props: [&#39;myMessage&#39;]
 }

 //这里的属性名为my-message
 var parentNode = {
  template: `
   <p class="parent">
   <child my-message="我是"></child>
   <child my-message="徐小小"></child>
   </p>`,
  components: {
   &#39;child&#39;: childNode
  }
 };
</script>

2. Accessoires dynamiques

Dans le modèle, vous devez lier dynamiquement les données du composant parent aux accessoires du modèle enfant, ce qui est similaire à la liaison à n'importe quelle fonctionnalité HTML ordinaire. , c'est-à-dire, utilisez v-bind. Chaque fois que les données du composant parent changent, la modification sera également transmise au composant enfant

3. Numéros de passe

 var childNode = {
  template: &#39;<p>{{myMessage}}</p>&#39;,
  props: [&#39;my-message&#39;]
    }

 var parentNode = {
  template: `
 <p class="parent">
 <child :my-message="data1"></child>
 <child :my-message="data2"></child>
 </p>`,
  components: {
   &#39;child&#39;: childNode
  },
  data() {
   return {
    &#39;data1&#39;: &#39;111&#39;,
    &#39;data2&#39;: &#39;222&#39;
   }
  }
 };

Débutants Une erreur courante consiste à transmettre une valeur en utilisant une syntaxe littérale

Résultat :

<script src="https://unpkg.com/vue"></script>
<p id="example">
 <parent></parent>
</p>
<script>
 var childNode = {
  template: &#39;<p>{{myMessage}}的类型是{{type}}</p>&#39;,
  props: [&#39;myMessage&#39;],
  computed: {
   type() {
    return typeof this.myMessage
   }
  }
 }
 var parentNode = {
  template: `
 <p class="parent">
 <my-child my-message="1"></my-child>
 </p>`,
  components: {
   &#39;myChild&#39;: childNode
  }
 };
 // 创建根实例
 new Vue({
  el: &#39;#example&#39;,
  components: {
   &#39;parent&#39;: parentNode
  }
 })
</script>

Puisqu'il s'agit d'un accessoire littéral, sa valeur est la chaîne "1" plutôt qu'un nombre. Si vous souhaitez transmettre un nombre réel, vous devez utiliser v-bind pour que sa valeur soit calculée comme une expression JS

Comment convertir une chaîne en nombre En fait, vous n'avez besoin de changer qu'une seule place.

Bien sûr, si vous souhaitez transmettre un type de chaîne via v-bind, que devez-vous faire ?

 var parentNode = {
  template: `
 <p class="parent">
 //只要把父组件my-message="1"改成:my-message="1"结果就变成number类型
 <my-child :my-message="1"></my-child>
 </p>`,
 };

Nous pouvons utiliser des accessoires dynamiques et définir le numéro 1 correspondant dans l'attribut de données

var parentNode = {
 template: `
 <p class="parent">
 <my-child :my-message="data"></my-child>
 </p>`,
 components: {
 &#39;myChild&#39;: childNode
 },
 //这里&#39;data&#39;: 1代表就是number类型，&#39;data&#39;: "1"那就代表String类型
 data(){
 return {
  &#39;data&#39;: 1
 }
 }
};

3. Enfant à parent : $emit

À propos de l'utilisation de $emit 1. Le composant parent peut utiliser des accessoires pour transmettre des données au composant enfant. 2. Les sous-composants peuvent utiliser $emit pour déclencher des événements personnalisés des composants parents.

Clé primaire enfant

Composant parent

<template> 
 <p class="train-city"> 
 <span @click=&#39;select(`大连`)&#39;>大连</span> 
 </p> 
</template> 
<script> 
export default { 
 name:&#39;trainCity&#39;, 
 methods:{ 
 select(val) { 
  let data = { 
  cityname: val 
  }; 
  this.$emit(&#39;showCityName&#39;,data);//select事件触发后，自动触发showCityName事件 
 } 
 } 
} 
</script>

Le résultat est : àVille : Dalian

<template> 
 <trainCity @showCityName="updateCity" :index="goOrtoCity"></trainCity> //监听子组件的showCityName事件。 
<template> 
<script> 
export default { 
 name:&#39;index&#39;, 
 data () { 
 return { 
  toCity:"北京" 
 } 
 } 
 methods:{ 
 updateCity(data){//触发子组件城市选择-选择城市的事件 
  this.toCity = data.cityname;//改变了父组件的值 
  console.log(&#39;toCity:&#39;+this.toCity)  
 } 
 } 
} 
</script>

Le deuxième cas

Explication détaillée :

<script src="https://unpkg.com/vue"></script>

 <p id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment1="incrementTotal"></button-counter>
  <button-counter v-on:increment2="incrementTotal"></button-counter>
 </p>
<script>
 Vue.component(&#39;button-counter&#39;, {
  template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
  //组件数据就是需要函数式，这样的目的就是让每个button-counter不共享一个counter
  data: function() {
   return {
    counter: 0
   } 
  },
  methods: {
   increment: function() {
   //这里+1只对button的值加1，如果要父组件加一，那么就需要$emit事件
    this.counter += 1;
    this.$emit(&#39;increment1&#39;, [12, &#39;kkk&#39;]);
   }
  }
 });
 new Vue({
  el: &#39;#counter-event-example&#39;,
  data: {
   total: 0
  },
  methods: {
   incrementTotal: function(e) {
    this.total += 1;
    console.log(e);
   }
  }
 });
</script>

1 : bouton-compteur sert de clé primaire parent, et il y a un bouton bouton dans la clé primaire parent.

2 : Les deux boutons sont liés aux événements de clic. Dans la méthode : this.$emit('increment1', [12, 'kkk']);, alors la classe parent v-on sera appelée The. événement incrément1 en cours de surveillance.

3 : Lorsque l'événement incrément1 est surveillé, alors incrémentTotal est exécuté. À ce moment, la valeur est transmise au composant parent et la méthode de la classe parent est appelée.

4 : Faites attention ici à v-on:'increment2 correspondant au deuxième compteur-bouton, et le bouton à l'intérieur correspond à ceci.$emit('increment1', [12, 'kkk' ]) ; Ainsi, le deuxième bouton bouton ne peut pas transmettre la valeur à sa clé primaire parente.

Exemple : Si un bouton est cliqué une fois, lui-même et ce qui précède augmenteront de 1, tandis que le deuxième bouton ne fera que s'incrémenter et n'affectera pas ce qui précède.

还有就是第一个按钮每点击一次，后台就会打印一次如下：

 四、ref ($refs)用法

ref 有三种用法

    1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

    2.ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。

    3.如何利用v-for 和ref 获取一组数组或者dom 节点

1.ref 加在普通的元素上，用this.ref.name 获取到的是dom元素

<script src="https://unpkg.com/vue"></script>

<p id="ref-outside-component" v-on:click="consoleRef">
 <component-father ref="outsideComponentRef">
 </component-father>
 <p>ref在外面的组件上</p>
</p>
<script>
 var refoutsidecomponentTem = {
  template: "<p class=&#39;childComp&#39;><h5 id="我是子组件">我是子组件</h5></p>"
 };
 var refoutsidecomponent = new Vue({
  el: "#ref-outside-component",
  components: {
   "component-father": refoutsidecomponentTem
  },
  methods: {
   consoleRef: function() {
    console.log(this.); // #ref-outside-component  vue实例
    console.log(this.$refs.outsideComponentRef); // p.childComp vue实例
   }
  }
 });
</script>

效果：当在p访问内点击一次：

2.ref使用在外面的元素上

<script src="https://unpkg.com/vue"></script>

<!--ref在外面的元素上-->
<p id="ref-outside-dom" v-on:click="consoleRef">
 <component-father>
 </component-father>
 <p ref="outsideDomRef">ref在外面的元素上</p>
</p>
<script>
 var refoutsidedomTem = {
  template: "<p class=&#39;childComp&#39;><h5 id="我是子组件">我是子组件</h5></p>"
 };
 var refoutsidedom = new Vue({
  el: "#ref-outside-dom",
  components: {
   "component-father": refoutsidedomTem
  },
  methods: {
   consoleRef: function() {
    console.log(this); // #ref-outside-dom vue实例
    console.log(this.$refs.outsideDomRef); // <p> ref在外面的元素上</p>
   }
  }
 });
</script>

 效果：当在p访问内点击一次：

3.ref使用在里面的元素上---局部注册组件

<script src="https://unpkg.com/vue"></script>
<!--ref在里面的元素上-->
<p id="ref-inside-dom">
 <component-father>
 </component-father>
 <p>ref在里面的元素上</p>
</p>
<script>
 var refinsidedomTem = {
  template: "<p class=&#39;childComp&#39; v-on:click=&#39;consoleRef&#39;>" +
   "<h5 id="我是子组件">我是子组件</h5>" +
   "</p>",
  methods: {
   consoleRef: function() {
    console.log(this); // p.childComp vue实例 
    console.log(this.$refs.insideDomRef); // <h5 id="我是子组件">我是子组件</h5>
   }
  }
 };
 var refinsidedom = new Vue({
  el: "#ref-inside-dom",
  components: {
   "component-father": refinsidedomTem
  }
 });
</script>

  效果：当在click范围内点击一次：

4.ref使用在里面的元素上---全局注册组件

<script src="https://unpkg.com/vue"></script>
<!--ref在里面的元素上--全局注册-->
<p id="ref-inside-dom-all">
 <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</p>
<script>
 //v-on:input指当input里值发生改变触发showinsideDomRef事件
 Vue.component("ref-inside-dom-quanjv", {
  template: "<p class=&#39;insideFather&#39;> " +
   "<input type=&#39;text&#39; ref=&#39;insideDomRefAll&#39; v-on:input=&#39;showinsideDomRef&#39;>" +
   " <p>ref在里面的元素上--全局注册 </p> " +
   "</p>",
  methods: {
   showinsideDomRef: function() {
    console.log(this); //这里的this其实还是p.insideFather
    console.log(this.$refs.insideDomRefAll); // <input type="text">
   }
  }
 });
 var refinsidedomall = new Vue({
  el: "#ref-inside-dom-all"
 });
</script>

效果：当我第一次输入1时，值已改变出发事件，当我第二次在输入时在触发一次事件，所以后台应该打印两次

相关推荐：

基于vue-element组件实现音乐播放器功能

VUE-地区选择器(V-Distpicker)组件的使用

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!