快速了解Vue父子组件传值以及父调子方法、子调父方法


Posted in Javascript onJuly 15, 2020

稍微总结了一下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>

 ①在父组件中的操作如下:

快速了解Vue父子组件传值以及父调子方法、子调父方法

 ②子组件中的操作如下:

快速了解Vue父子组件传值以及父调子方法、子调父方法

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

④这个方法也可以进行传值,在括号中写入值,子组件接收即可  。

希望此文可以帮助到你哦。先去吃饭啦

以上就是快速了解Vue父子组件传值以及父调子方法、子调父方法的详细内容,更多关于Vue父子组件传值 的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
发布一个高效的JavaScript分析、压缩工具 JavaScript Analyser
Nov 30 Javascript
根据鼠标的位置动态的控制层的位置
Nov 24 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
Web前端开发之水印、图片验证码
Nov 27 Javascript
js实现获取鼠标当前的位置
Dec 14 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 #Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 #Javascript
微信小程序实现列表的横向滑动方式
Jul 15 #Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 #Javascript
JavaScript实时更新当前的时间的示例代码
Jul 15 #Javascript
jQuery 添加元素和删除元素的方法
Jul 15 #jQuery
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 #Javascript
You might like
php无限极分类实现的两种解决方法
2013/04/28 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php 判断是否是中文/英文/数字示例代码
2013/09/30 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
JS加jquery简单实现标签元素的显示或隐藏
2013/09/23 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
vue-router实现嵌套路由的讲解
2019/01/19 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[01:16:50]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第一场 3月7日
2021/03/11 DOTA
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python实现Virginia无密钥解密
2019/03/20 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
关于PyTorch源码解读之torchvision.models
2019/08/17 Python
如何基于python生成list的所有的子集
2019/11/11 Python
基于python实现雪花算法过程详解
2019/11/16 Python
virtualenv介绍及简明教程
2020/06/23 Python
乌克兰品牌化妆品和香水在线商店:Bomond
2020/01/14 全球购物
linux面试题参考答案(10)
2013/11/04 面试题
外企测试工程师面试题
2015/02/01 面试题
编程输出如下图形
2013/11/24 面试题
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
大学新闻系自荐书
2014/05/31 职场文书
就业协议书样本
2014/08/20 职场文书
竞选班长演讲稿500字
2014/08/22 职场文书
导游词之南京中山陵
2019/11/27 职场文书
python装饰器代码解析
2022/03/23 Python