快速了解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 字符串连接性能优化
Dec 20 Javascript
jquery URL参数判断,确定菜单样式
May 31 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
微信小程序单选框自定义赋值
May 26 Javascript
vue 如何使用递归组件
Oct 23 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 array_multisort() 函数的深入解析
2013/06/20 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
如何使用PHP对网站验证码进行破解
2015/09/17 PHP
Zend Framework实现将session存储在memcache中的方法
2016/03/22 PHP
PHP数组实例详解
2016/06/26 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
使用简洁的jQuery方法实现隔行换色功能
2014/01/02 Javascript
使用jquery实现IE下按backspace相当于返回操作
2014/03/18 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
jquery获取img的src值的简单实例
2016/05/17 Javascript
ES6中Math对象的部分扩展
2017/02/20 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
BootStrap的双日历时间控件使用
2017/07/25 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
node中的密码安全(加密)
2018/09/17 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
2020/11/05 Javascript
python用来获得图片exif信息的库实例分析
2015/03/16 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
python实现Flappy Bird源码
2018/12/24 Python
python实现对输入的密文加密
2019/03/20 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
澳洲的服装老品牌:SABA
2018/02/06 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
经典C++面试题一
2016/11/06 面试题
物流仓管员工作职责
2014/01/06 职场文书
大一新生学期自我评价
2014/04/09 职场文书
关于颐和园的导游词
2015/01/30 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
2016大一新生军训感言
2015/12/08 职场文书
PHP控制循环操作的时间
2021/04/01 PHP