详解vue组件父与子通信（一）-js教程-PHP中文网

首页

web前端

js教程

详解vue组件父与子通信（一）

小云云

Dec 26, 2017 pm 01:11 PM

组件详解沟通

本文主要为大家详细介绍了vue组件父与子通信详解，实现登录窗口，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望可以帮助到大家。

一、组件间通信（父组件 --> 子组件）

步骤：

①父组件在调用子组件传值

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

登录后复制

②在子组件中获取父组件传来的值

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

登录后复制

代码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是属性名，必须都一样……拿data中的用v-bind:或者：
props是property属性,是个数组

代码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>

登录后复制

代码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>

登录后复制

要拿到data中的数据就要v-bind,否则就不用。

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7338

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1265

PHP教程

1210

显示更多

Related knowledge

新一代光纤宽带技术 ——50G PON Apr 20, 2024 pm 09:22 PM

上篇文章（链接），小枣君给大家介绍了宽带技术从ISDN、xDSL到10GPON的发展历程。今天，我们来聊聊即将到来的新一代光纤宽带技术——50GPON。█F5G和F5G-A介绍50GPON之前，先说说F5G和F5G-A。2020年2月，ETSI（欧洲电信标准化协会）推进了一套以10GPON+FTTR、Wi-Fi6、200G光传送/汇聚、OXC等技术为基础的固定通信网络技术体系，并将其命名为F5G，也就是第五代固网通信技术（The5thgenerationFixednetworks）。F5G是固网

Win11管理员权限获取详解 Mar 08, 2024 pm 03:06 PM

Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限

Oracle SQL中的除法运算详解 Mar 10, 2024 am 09:51 AM

OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算

Angular组件及其显示属性：了解非block默认值 Mar 15, 2024 pm 04:51 PM

Angular框架中组件的默认显示行为不是块级元素。这种设计选择促进了组件样式的封装，并鼓励开发人员有意识地定义每个组件的显示方式。通过显式设置CSS属性 display，Angular组件的显示可以完全控制，从而实现所需的布局和响应能力。

PHP模运算符的作用及用法详解 Mar 19, 2024 pm 04:33 PM

PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模

无线鼠标的发展史 Jun 12, 2024 pm 08:52 PM

原文标题：《无线鼠标到底是怎么做到无线的？》无线鼠标慢慢成了现在办公电脑的标配，从此再也不用拖着长长的线跑来跑去了。可是，无线鼠标是怎么工作的呢？今天我们一起来学习一下No.1无线鼠标的发展史你知道吗，无线鼠标现在也已经40岁了，1984年的时候，罗技研制了世界上第一款无线鼠标，不过这个无线鼠标采用红外线作为信号的载体，据说长得像下面图片这个样子，后面由于性能原因而宣告失败。直到十年后的1994年，罗技终于研发成功了一个工作在27MHz的无线鼠标，这个27MHz频率也成了很长一段时间内，无线鼠标

宽带上网技术简史 Apr 16, 2024 am 09:00 AM

在如今这个数字时代，宽带已经成为我们每个人、每个家庭的生活必需品。如果没有它，我们会坐立难安、心绪不宁。那么，你知道宽带背后的技术原理吗？从最早期的56k“猫”拨号，到现在的千兆城市、千兆家庭，我们的宽带技术到底经历了怎样的变革？今天这篇文章，我们就来详细了解一下——“宽带的故事”。█xDSL和ISDN下面这个界面，你见过吗？我相信很多70后80后的小伙伴，肯定见过，并且非常熟悉。没错，这就是当年我们最初接触互联网时，进行“拨号上网”的界面。那还是20多年前，小枣君还在上大学的时候。为了上网，我

详细解析C语言学习路线 Feb 18, 2024 am 10:38 AM

C语言作为一门广泛应用在软件开发领域的编程语言，是很多程序员初学者的首选。学习C语言不仅可以帮助我们建立编程的基础知识，还可以提升我们解决问题和思考的能力。本文将详细介绍一条C语言学习的路线图，帮助初学者更好地规划自己的学习进程。1.学习基本语法在开始学习C语言之前，我们首先需要了解C语言的基本语法规则。这包括变量和数据类型、运算符、控制语句（如if语句、

See all articles

详解vue组件父与子通信（一）

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题