Vue父组件和子组件之间数据传递和方法调用
作者:yin 时间:2023-07-02 17:01:57
vue组件在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。
父组件向子组件传值(子组件主动获取父组件的数据和方法)
父组件import引用子组件
使用子组件时在子组件上添加一个v-bind属性,并绑定上数据
在子组件中创建 props ,在props 中创建相同的属性名,用来接收数据
把接收到的数据在子组件中使用
子组件向父组件传值(父组件主动获取子组件的数据和方法)
子组件中需要发出该自定义事件,可以是按钮的点击事件,也可以是其他方式
将需要传的值放在 $emit 第二个参数的位置,这个参数会被传给父组件中的响应方法
需要在父组件中使用子组件并在子组件标签上绑定对事件的监听
演示代码:
//父组件
<template>
<div id="header">
<headerchild ref="headerChild"></headerchild>
<button @click="getChild()">父组件获取子组件的数据和方法</button>
</div>
</template>
<script>
import HeaderChild from './HeaderChild'
export default {
data () {
return {
title:'我是父组件的数据'
}
},
methods: {
getChild (){
console.log(this.$refs.headerChild.name)
},
run (){
console.log("我是父组件里面的方法")
}
},
components: {
'headerchild': HeaderChild
}
}
</script>
<style lang="sass" scoped>
</style>
//子组件
<template>
<div id="headerchild">
<button @click="getParent()">获取父组件的数据和方法</button>
</div>
</template>
<script>
export default {
data () {
return {
name:'我是子组件里面的数据'
}
},
methods:{
getParent(){
console.log(this.$parent.title) /*获取整个父组件*/
this.$parent.run()/*获取父组件的方法*/
}
},
props:['title','run','home'] /*通过props接收父组件传递过来的数据 */
}
</script>
标签:Vue,父组件,子组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Javascript 利用 DOM 特性的两个小技巧
2009-02-28 14:07:00
pytorch的Backward过程用时太长问题及解决
2022-12-11 00:16:06
![](https://img.aspxhome.com/file/2023/9/81649_0s.png)
Python实现抓取页面上链接的简单爬虫分享
2021-03-28 23:03:13
![](https://img.aspxhome.com/file/2023/6/135076_0s.jpg)
使用python如何删除同一文件夹下相似的图片
2021-10-19 02:52:23
Python中暂存上传图片的方法
2022-04-05 20:53:08
基于python图像处理API的使用示例
2022-12-19 02:14:53
MySQL 选择合适的存储引擎
2024-01-21 08:55:24
![](https://img.aspxhome.com/file/2023/0/70460_0s.png)
阿里开源低代码引擎和生态建设实战及思考
2023-03-30 05:46:43
![](https://img.aspxhome.com/file/2023/6/131886_0s.jpg)
JavaScript框架比较:DOM遍历
2010-04-23 14:41:00
PyQt5实现简易计算器
2022-12-14 02:12:38
![](https://img.aspxhome.com/file/2023/8/94148_0s.jpg)
Python多线程编程(八):使用Event实现线程间通信
2023-05-07 15:25:50
Python变量基础知识
2021-10-11 02:13:12
2008年情人节各网站节日Logo欣赏
2008-02-17 14:12:00
![](https://img.aspxhome.com/file/UploadPic/20082/17/2008217141834880s.gif)
PHP使用观察者模式处理异常信息的方法详解
2023-10-19 15:53:30
Numpy实现矩阵运算及线性代数应用
2022-10-18 17:55:50
![](https://img.aspxhome.com/file/2023/1/94601_0s.jpg)
JavaScript函数封装的示例详解
2024-04-25 13:15:51
![](https://img.aspxhome.com/file/2023/2/135462_0s.gif)
go mod详细使用教程
2024-04-26 17:32:19
![](https://img.aspxhome.com/file/2023/8/133988_0s.jpg)
如何实现SQL Server 2005快速Web分页
2009-01-21 14:51:00
将数字转换成大写的人民币表达式的js函数
2024-04-30 10:08:24
Python Sympy计算梯度、散度和旋度的实例
2023-03-11 05:14:10