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中的console.profile()函数详细介绍
Dec 29 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
AngularJS延迟加载html template
Jul 27 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
jQuery之动画效果大全
Nov 09 Javascript
JS实现的点击表头排序功能示例
Mar 27 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
JS沙箱模式实例分析
Sep 04 Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
js 计算图片内点个数的示例代码
Apr 04 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 code 验证码生成类定义和简单使用示例
2020/05/27 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
2012/01/04 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
JavaScript中定义函数的三种方法
2015/03/12 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
2018/09/30 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
js实现简单的贪吃蛇游戏
2020/04/23 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
python爬虫常用的模块分析
2014/08/29 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
python实现识别相似图片小结
2016/02/22 Python
基于Python的关键字监控及告警
2017/07/06 Python
Python下载网络小说实例代码
2018/02/03 Python
python的中异常处理机制
2018/08/30 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
Flask中sqlalchemy模块的实例用法
2020/08/02 Python
基础的CSS3弹性盒Flexbox布局使用实例
2016/04/08 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
什么是.net
2015/08/03 面试题
英语自荐信常用语句
2013/12/13 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
军人离婚协议书样本
2014/10/21 职场文书
事业单位考察材料范文
2014/12/25 职场文书
Typescript类型系统FLOW静态检查基本规范
2022/05/25 Javascript