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 相关文章推荐
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
location.href 在IE6中不跳转的解决方法与推荐使用代码
Jul 08 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
DOM基础教程之模型中的模型节点
Jan 19 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
angular使用post、get向后台传参的问题实例
May 27 Javascript
详解webpack + vue + node 打造单页面(入门篇)
Sep 23 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
vue v-model的用法解析
Oct 19 Javascript
canvas 中如何实现物体的框选
Aug 05 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
教你php如何实现验证码
2016/01/20 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
Bootstrap Img 图片样式(推荐)
2016/12/13 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
使用vue cli4.x搭建vue项目的过程详解
2020/05/08 Javascript
python批量下载图片的三种方法
2013/04/22 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
django如何连接已存在数据的数据库
2018/08/14 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python多进程并行代码实例
2019/09/30 Python
如何基于Python批量下载音乐
2019/11/11 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
Python面向对象编程基础实例分析
2020/01/17 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
python switch 实现多分支选择功能
2020/12/21 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
利用Storage Event实现页面间通信的示例代码
2018/07/26 HTML / CSS
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
简单叙述一下MYSQL的优化
2016/05/09 面试题
商场主管竞聘书
2014/03/31 职场文书
巴西世界杯32强口号
2014/06/05 职场文书
2016年秋季运动会通讯稿
2015/11/25 职场文书
2016教师校本培训心得体会
2016/01/08 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang