Maison >interface Web >js tutoriel >Explication détaillée de la communication parent-enfant du composant Vue (1)

Explication détaillée de la communication parent-enfant du composant Vue (1)

小云云original: 2017-12-26 13:11:491835parcourir

Cet article présente principalement l'explication détaillée de la communication parent-enfant du composant Vue et l'implémentation de la fenêtre de connexion, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Communication entre les composants (composant parent --> composant enfant)

Étapes :

①Composant parent Pass la valeur lors de l'appel du composant enfant

<child-component myValue="123"> </child-component>

② Récupère la valeur transmise par le composant parent dans le composant enfant

Vue.component(&#39;child-component&#39;,{
　　props:[&#39;myValue&#39;],
　　template:&#39;&#39;
})

Code 1 :

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>父传子</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
 <parent-component></parent-component>
 </p>
 <script>
 // 在vue中一切都是组件
 //父传子
 Vue.component("parent-component",{
  data:function(){
  return {
   gift:"传家宝"
  }
  },
  template:`
  <p>
   <h1>这是父组件</h1>
   <hr>
   <child-component v-bind:myValue="gift"></child-component>
  </p>
  `
 })
 Vue.component("child-component",{
  props:["myValue"],
  template:`
  <p>
   <h1>这是子组件</h1>
   <p>{{"父传递的值："+myValue}}</p>
  </p>
  `
 })
 new Vue({
  el:"#container",
  data:{
  msg:"Hello VueJs"
  }
 })
 </script>
 </body>
</html>

myValue est le nom de l'attribut, ils doivent être les mêmes... utilisez v dans data -bind : Ou :
props est un attribut de propriété, qui est un tableau

Code 2 :

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>父子之间通信练习</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
 <my-login></my-login>
 </p>
 <script>
/*
 登录窗口
 创建4个组件，分别是my-label my-input my-button my-login(复合组件)
*/
 Vue.component("my-label",{
  props:["myLabel"],
  template:`
  <p>
   <label>{{myLabel}}</label>
  </p>
  `
 })
 Vue.component("my-input",{
  template:`
  <p>
   <input type="text"/>
  </p>
  `
 })
 Vue.component("my-button",{
  props:["myButton"],
  template:`
  <p>
   <button>{{myButton}}</button>
  </p>
  `
 })
 //复合组件
 Vue.component("my-login",{
  data:function(){
  return {
   uname:"用户名",
   upwd:"密码",
   login:"登录",
   register:"注册"
  }
  },
  template:`
  <p>
  <my-label v-bind:myLabel="uname"></my-label>
  <my-input></my-input>
  <my-label v-bind:myLabel="upwd"></my-label>
  <my-input></my-input>
  <my-button v-bind:myButton="login"></my-button> 
  <my-button v-bind:myButton="register"></my-button>
  </p>
  `
 })
 new Vue({
  el:"#container",
  data:{
  msg:"Hello VueJs"
  }
 })
 </script>
 </body>
</html>

Code 3 :

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <script src="js/vue.js"></script>
 <title></title>
</head>
<body>

<p id="container">
 <my-login></my-login>
</p>

<script>

 Vue.component(&#39;my-label&#39;,{
 props:[&#39;labelName&#39;],
 template:&#39;<label>{{labelName}}</label>&#39;
 })
 Vue.component(&#39;my-input&#39;,{
 props:[&#39;tips&#39;],
 template:&#39;<input type="text" :placeholder="tips"/>&#39;
 })
 Vue.component(&#39;my-button&#39;,{
 props:[&#39;btnName&#39;],
 template:&#39;<button>{{btnName}}</button>&#39;
 })

 Vue.component(&#39;my-login&#39;,{
 template:`
 <form>
  <my-label labelName="用户名"></my-label>
  <my-input tips="请输入用户名"></my-input>
  <br/>
  <my-label labelName="密码"></my-label>
  <my-input tips="请输入密码"></my-input>
  <br/>
  <my-button btnName="登录"></my-button>
  <my-button btnName="注册"></my-button>
 </form>
 `
 })


 new Vue({
 el: &#39;#container&#39;,
 data: {
  msg: &#39;Hello Vue&#39;
 }
 })
</script>

</body>
</html>

Pour obtenir les données dans data, vous avez besoin de v-bind, sinon ce n'est pas nécessaire.

Recommandations associées :

Introduction aux événements de stockage, méthodes de communication entre les pages js

Communication des composants Vue.js Analyse détaillée de plusieurs postures

Une brève introduction aux méthodes de communication entre les composants React

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée du pourcentage de remplissage CSS pour créer une mise en page d'image adaptativeArticle suivant：Explication détaillée du pourcentage de remplissage CSS pour créer une mise en page d'image adaptative

Articles Liés

Voir plus