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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript下过滤数组重复值的代码
Sep 10 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JQuery结合CSS操作打印样式的方法
Dec 24 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
使用时间戳解决ie缓存的问题
Aug 20 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
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
聊天室php&amp;mysql(五)
2006/10/09 PHP
php自动加载的两种实现方法
2010/06/21 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
JS实现鼠标框选效果完整实例
2016/06/20 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
基于Vuejs实现购物车功能
2016/08/02 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
react-router中的属性详解
2017/06/01 Javascript
three.js中文文档学习之创建场景
2017/11/20 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
python中requests模块的使用方法
2015/04/08 Python
详解Python3中字符串中的数字提取方法
2017/01/14 Python
Python的装饰器使用详解
2017/06/26 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python学习开发mock接口
2019/04/28 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Noon埃及:埃及在线购物
2019/11/26 全球购物
厨师个人自我鉴定范文
2014/04/19 职场文书
中学生期中自我鉴定
2014/04/20 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
留学推荐信英文范文
2015/03/26 职场文书
乱世佳人观后感
2015/06/08 职场文书
李强优秀员工观后感
2015/06/16 职场文书
监护人证明
2015/06/19 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
RestTemplate如何通过HTTP Basic Auth认证示例说明
2022/03/17 Java/Android
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android