Vue父子组件传值以及父调子方法、子调父方法
时间:2019-11-11
本文章向大家介绍Vue父子组件传值以及父调子方法、子调父方法,主要包括Vue父子组件传值以及父调子方法、子调父方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
稍微总结了一下Vue中父子间传值以及相互调方法的问题,非常基础、希望可以帮到你!先来个最常用的,直接上代码:
1、父传值给子组件
父组件:
<template> <div> <p class="father">父组件</p> <child :sid="id"></child> </div> </template> <script> import child from './child' export default { components: { child }, data() { return { id:'0920', // 父组件向子组件传的值 } }, } </script>
子组件:
<template> <div> <p class="child">子组件</p> <p class="child">接收父组件的值是:{{sid}}</p> </div> </template> <script> export default { props:{ sid:{ type:String, default: '0' } }, data() { return { } } } </script>
①在父组件中的操作如下:
②子组件中的操作如下:
2、子传值给父组件
父组件:
<template> <div> <p class="father">父组件</p>
<p class="father">接收到子组件的值:{{childSia}}</p>
<child @passVaule="passValue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data() { return { childSia:'', // 接收子组件的值 } }, methods: { passValue(data) { this.childSia = data; } } } </script>
子组件:
<template> <div> <p class="child">子组件</p> <button @click="valueClick">传值</button> </div> </template> <script> export default { data() { return { } }, methods: { valueClick() { this.$emit('passVaule',19) } } } </script>
截图说明太累了,我直觉总结我文字吧。
①子组件中给一个方法去触发$emit,第一个参数是在父组件引入子组件绑定的函数名('passVaule'),第二个是要传的值(19)
②父组件中绑定一个函数,调用父组件中绑定的函数,在其中对值进行接收操作
3、子调用父组件中的方法
父组件:
<template> <div> <p class="father">父组件</p> <child @funVaule="funValue"></child> </div> </template> <script> import child from './child' export default { components: { child }, data() { return { } }, methods: { funValue() { console.log('调用了父组件中的函数'); } } } </script>
子组件:
<template> <div> <p class="child">子组件</p> <button @click="funClick">调用父组件方法</button> </div> </template> <script> export default { data() { return { } }, methods: { funClick() { this.$emit('funVaule') } } } </script>
①这个跟子传值给父类似,只是不传值,调用了父组件的绑定的函数
4、父调用子组件中的方法
父组件:
<template> <div> <p class="father">父组件</p> <button @click="childClick">调用子组件方法</button> <child ref="mychild" ></child> </div> </template> <script> import child from './child' export default { components: { child }, data() { return { } }, methods: { childClick() { this.$refs.mychild.testNum(9809) } } } </script>
子组件:
<template> <div> <p class="child">子组件</p> </button> </div> </template> <script> export default { data() { return { } }, methods: { testNum(e) { console.log('调用了子组件中的方法 11111',e) } } } </script>
① 父组件中在引入的子组件中写入 ref = "mychild" mychid为自己定义的实例名
② 在函数中写 this.refs.mychild.testNum()。 “testNum”为子组件中定义的函数名
③子组件定义一个函数,让父组件调用即可,我定义的位testNum
④这个方法也可以进行传值,在括号中写入值,子组件接收即可 。
希望此文可以帮助到你哦。先去吃饭啦
原文地址:https://www.cnblogs.com/dingxingxing/p/11837750.html
- [Go语言]一种用于网游服务器的支持多路复用的网络协议处理框架
- 设计包导出接口的随想
- [Go语言]实现可以枚举的map
- GO语言常用的文件读取方式
- GO语言文件的创建与打开实例分析
- Go语言单链表实现方法
- Go语言实现AzDG可逆加密算法实例
- 剖析Go编写的Socket服务器模块解耦及基础模块的设计
- Golang中的sync.WaitGroup用法实例
- Go 语言实现 MapReduce 框架
- Performance Schema使用简介(一)
- golang 垃圾回收 gc
- Go语言服务器开发之简易TCP客户端与服务端实现方法
- 移动搜索SEO分享:PHP自动生成百度开放适配及360移动适配专用的Sitemap文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 设计一个网站(域名)的镜像
- LoRa终端设备ASR6505普通GPIO操作
- LoRa终端设备ASR6505之I2C通信
- 我在暴躁同事小张的胁迫下学会了Go的交叉编译和条件编译
- LoRa终端设备ASR6505之PingPong通信
- LoRa点对点通信,OLED显示(内附代码)
- 08 . Python3高阶函数之迭代器、装饰器
- redis源码之SDS
- 01 . Tomcat简介及多实例部署
- 学练结合,快速掌握Kubernetes Service
- arraylist linkedlist vector
- Java的HashMap和HashTable
- 花木兰到底好看不,我用Python爬取了几万条评论!
- java方法重载
- java中super()和this()浅析