vue组件父与子通信详解(一)


Posted in Javascript onNovember 07, 2017

本文实例为大家分享了vue组件父与子通信的具体代码,供大家参考,具体内容如下

一、组件间通信(父组件    -->  子组件)

步骤:

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

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

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

Vue.component('child-component',{
props:['myValue'],

template:''
})

代码1:

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>父传子</title>
 <script src="js/vue.js"></script>
 </head>
 <body>
 <div id="container">
 <p>{{msg}}</p>
 <parent-component></parent-component>
 </div>
 <script>
 // 在vue中一切都是组件
 //父传子
 Vue.component("parent-component",{
  data:function(){
  return {
   gift:"传家宝"
  }
  },
  template:`
  <div>
   <h1>这是父组件</h1>
   <hr>
   <child-component v-bind:myValue="gift"></child-component>
  </div>
  `
 })
 Vue.component("child-component",{
  props:["myValue"],
  template:`
  <div>
   <h1>这是子组件</h1>
   <p>{{"父传递的值:"+myValue}}</p>
  </div>
  `
 })
 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>
 <div id="container">
 <p>{{msg}}</p>
 <my-login></my-login>
 </div>
 <script>
/*
 登录窗口
 创建4个组件,分别是my-label my-input my-button my-login(复合组件)
*/
 Vue.component("my-label",{
  props:["myLabel"],
  template:`
  <div>
   <label>{{myLabel}}</label>
  </div>
  `
 })
 Vue.component("my-input",{
  template:`
  <div>
   <input type="text"/>
  </div>
  `
 })
 Vue.component("my-button",{
  props:["myButton"],
  template:`
  <div>
   <button>{{myButton}}</button>
  </div>
  `
 })
 //复合组件
 Vue.component("my-login",{
  data:function(){
  return {
   uname:"用户名",
   upwd:"密码",
   login:"登录",
   register:"注册"
  }
  },
  template:`
  <div>
  <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>
  </div>
  `
 })
 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>

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

<script>

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

 Vue.component('my-login',{
 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: '#container',
 data: {
  msg: 'Hello Vue'
 }
 })
</script>

</body>
</html>

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用非html5实现js板连连看游戏示例代码
Sep 22 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
利用NPM淘宝的node.js镜像加速nvm
Mar 27 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 #Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 #Javascript
vue中SPA单页面应用程序详解
Nov 07 #Javascript
vue-router实现组件间的跳转(参数传递)
Nov 07 #Javascript
详解Vue路由钩子及应用场景(小结)
Nov 07 #Javascript
Vue-Router实现组件间跳转的三种方法
Nov 07 #Javascript
vue 运用mock数据的示例代码
Nov 07 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
PHP Reflection API详解
2015/05/12 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
2016/11/18 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
AngularJS日程表案例详解
2017/08/15 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
JavaScript array常用方法代码实例详解
2020/09/02 Javascript
[54:51]Ti4 冒泡赛第二轮LGD vs C9 3
2014/07/14 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
如何用python整理附件
2018/05/13 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
Python 获取主机ip与hostname的方法
2018/12/17 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
Python3.5多进程原理与用法实例分析
2019/04/05 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python将excel转换为csv的代码方法总结
2019/07/03 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
戒赌保证书
2015/05/11 职场文书
运动会入场词
2015/07/18 职场文书
56句经典英文座右铭
2019/08/09 职场文书
phpQuery解析HTML乱码问题(补充官网未列出的乱码解决方案)
2021/04/01 PHP