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 相关文章推荐
jquery 实现表单验证功能代码(简洁)
Jul 03 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
JavaScript判断是否为数字的4种方法及效率比较
Apr 01 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
vue favicon设置以及动态修改favicon的方法
Dec 21 Javascript
js实现随机8位验证码
Jul 24 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 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语法(5)
2006/10/09 PHP
ecshop实现smtp发送邮件
2015/02/03 PHP
php实现将数组转换为XML的方法
2015/03/09 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
JS数组的赋值介绍
2014/03/10 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
详解express使用vue-router的history踩坑
2019/06/05 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
python类继承用法实例分析
2014/10/10 Python
python实现定时同步本机与北京时间的方法
2015/03/24 Python
Python 字符串处理特殊空格\xc2\xa0\t\n Non-breaking space
2020/02/23 Python
如何理解Python中包的引入
2020/05/29 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
公司授权委托书范文
2014/08/02 职场文书
超市优秀员工获奖感言
2014/08/15 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
门面房租房协议书
2014/12/01 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
校长新学期致辞
2015/07/30 职场文书
高中体育课教学反思
2016/02/16 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
oracle数据库去除重复数据
2022/05/20 Oracle