Home > Article > Web Front-end > Detailed explanation of Vue component parent-child communication (1)

Detailed explanation of Vue component parent-child communication (1)

小云云Original: 2017-12-26 13:11:491796browse

This article mainly introduces the detailed explanation of the communication between the parent and the child of the Vue component and the realization of the login window. It has a certain reference value. Interested friends can refer to it. I hope it can help everyone.

1. Communication between components (parent component --> child component)

Steps:

①Parent component Pass the value when calling the child component

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

②Get the value passed by the parent component in the child component

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 is the attribute name, which must be the same...use v-bind: or:

props is a property attribute, which is an array

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>

To get the data in data, v-bind is required, otherwise it is not used.

Related recommendations:

Introduction to the storage event of the communication method between js pages

Vue.js component communication Detailed analysis of several postures

A brief introduction to the communication methods between React components

The above is the detailed content of Detailed explanation of Vue component parent-child communication (1). For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of CSS percentage padding to create image adaptive layoutNext article：Detailed explanation of CSS percentage padding to create image adaptive layout

See more

Detailed explanation of Vue component parent-child communication (1)

Related articles