Vue父子传递实例讲解


Posted in Javascript onFebruary 14, 2020

实现功能:

1、子组件的input输入,改变父组件信息

2、父组件对子组件1,3进行监听与控制

3、子组件1与子组件3相互关联

父子双向通信流程:

子组件的input通过事件监听->控制子组件的data中变量/向父组件$emit子事件及变量

父组件监听到$emit事件及变量,赋予父组件的变量,通过props传到子组件

<body>
<div id = "app">
 <!-- //将父组件num1的数据传给props中的pnumber1,实现父传子
 //监听子组件num1change事件,这里recdnum1函数,没明白加括号出错 -->
<cnp 
 :pnumber1 = "num1"
 :pnumber3 = "num3"
 @num1change = "recdnum1"
 @num3change="recdnum3" >
</cnp>
</div> 

<!-- //template 编写自己的模版 -->
<template id = "mytemp">
 <div>
  <h3>props:{{pnumber1}}</h3>
  <h3>child-data:{{dnumber1}}</h3>
  <h3></h3>
  <input type="text" :value="dnumber1" @input="num1input">
  <h3>props:{{pnumber3}}</h3>
  <h3>child-data:{{dnumber3}}</h3>
  <input type="text" :value="dnumber3" @input="num3input">  
 </div>
</template>

<script>
var app = new Vue({
 el:"#app",
 data(){
  return{
   //父组件数据库中的默认数值
   num1:11,
   num3:31,
  }
 },
 methods:{
  //监听事件中,将子组件传来的dnumber1传给num1,num1传给pnumber1
  recdnum1(value){
   //默认传递来的value为String,根据需要转为Int或Float
   this.num1 = parseInt(value);
   },
  recdnum3(value){
   this.num3=parseFloat(value);
   }   
 },
 components: {
  cnp:{
   template:"#mytemp",
   props: {
    pnumber1:{
     //默认props的数据格式和默认值
     type:Number,
     default:1
    },
    pnumber3:{
     type:Number,
     default:3
    }        
   },
   data(){
    return{
     //将props的数值赋予data中变量
     dnumber1:this.pnumber1,
     dnumber3:this.pnumber3
    }
   },
   methods: {
    num1input(event){
     //将input中的数值传给dnumber1
     this.dnumber1 = event.target.value;
     //向父组件发射事件num1change,并传出dnumber1数据
     this.$emit("num1change",this.dnumber1);
     //绑定pnumber3数值的关联性
     this.dnumber3=this.dnumber1*5;
     //向父组件发射pnumber3信息
     this.$emit("num3change",this.dnumber3);
    },
    num3input(event){
     this.dnumber3 = event.target.value;
     this.$emit("num3change",this.dnumber3)
    },
   }
  }
 }
});
</script>
</body>

以上就是相关的实例代码,希望三水点靠木整理的内容能够帮助到大家。

Javascript 相关文章推荐
javascript开发随笔一 preventDefault的必要
Nov 25 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
Apr 15 Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS操作input标签属性checkbox全选的实现代码
Mar 02 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
layui输入框中只允许输入整数的实现方法
Sep 18 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
Javascript操作select控件代码实例
Feb 14 #Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 #Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
Feb 14 #Javascript
node事件循环和process模块实例分析
Feb 14 #Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 #Javascript
JavaScript简单编程实例学习
Feb 14 #Javascript
JS实现打砖块游戏
Feb 14 #Javascript
You might like
php smarty的预保留变量总结
2008/12/04 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
PHP+MySql实现一个简单的留言板
2020/07/19 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
JavaScript中的变量声明早于赋值分析
2012/03/01 Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
js获取本机的外网/广域网ip地址完整源码
2013/08/12 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
2013/11/06 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
2015/12/16 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
2016/03/01 Javascript
JS构造函数与原型prototype的区别介绍
2016/07/04 Javascript
使用jquery如何获取时间
2016/10/13 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
搭建基于express框架运行环境的方法步骤
2018/11/15 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
微信小程序聊天功能的示例代码
2020/01/13 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python爬虫实现获取下一页代码
2020/03/13 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Pandas之缺失数据的实现
2021/01/06 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
工伤事故赔偿协议书
2014/04/15 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
本科毕业论文答辩稿
2015/06/23 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
使用 DataAnt 监控 Apache APISIX的原理解析
2022/07/07 Servers
微信小程序纯CSS实现无限弹幕滚动效果
2022/09/23 HTML / CSS