Explication détaillée de la communication parent-enfant du composant Vue (1)-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-26 13:11:49

original

1810 Les gens l'ont consulté

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>

Copier après la connexion

② 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;
})

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!