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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
jQuery在html有效在jsp无效的原因及解决方法
Aug 02 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 Javascript
js闭包的9个使用场景
Dec 29 Javascript
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
B2K与车机的中波PK
2021/03/02 无线电
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
基于JQuery制作的产品广告效果
2010/12/08 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
js实现遮罩层弹出框的方法
2015/01/15 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
JS实现向表格行添加新单元格的方法
2015/03/30 Javascript
JavaScript组件开发完整示例
2015/12/15 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
VUE+elementui面包屑实现动态路由详解
2019/11/04 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
Python图像处理之图像的缩放、旋转与翻转实现方法示例
2019/01/04 Python
python3正则提取字符串里的中文实例
2019/01/31 Python
python生成任意频率正弦波方式
2020/02/25 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
意大利单身交友网站:Meetic
2020/07/12 全球购物
以下的初始化有什么区别
2013/12/16 面试题
宣传保护环境的公益广告词
2014/03/13 职场文书
委托书怎么写
2014/07/31 职场文书
2015年度女工工作总结
2015/10/22 职场文书