vue中\$refs、\$emit、$on的使用场景
2024-09-01 07:05:44
1、$emit的使用场景
子组件调用父组件的方法并传递数据
注意：子组件标签中的时间也不区分大小写要用“-”隔开
子组件：
<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件中的数据"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
}
}
}
</script>
父组件：
<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父组件中通过监测my-event事件执行一个方法，然后取到子组件中传递过来的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}
}
}
</script>
2、$refs的使用场景
父组件调用子组件的方法，可以传递数据
注意：子组件标签中的时间也不区分大小写要用“-”隔开
父组件：
<template>
<div id="app">
<child-a ref="child"></child-a>
<!--用ref给子组件起个名字-->
<button @click="getMyEvent">点击父组件</button>
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "我是父组件中的数据"
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
}
}
}
</script>
子组件：
<template>
<button>点击我</button>
</template>
<script>
export default {
methods: {
emitEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
}
}
}
</script>
3、$on的使用场景
兄弟组件之间相互传递数据
- 首先创建一个vue的空白实例（兄弟间的桥梁）
import Vue from 'vue'
export default new Vue()
- 子组件 childa
- 发送方使用 $emit 自定义事件把数据带过去
<template>
<div>
<span>A组件->{{msg}}</span>
<input type="button" value="把a组件数据传给b" @click ="send">
</div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
data(){
return {
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}
</script>
- 父组件：
<template>
<div>
<childa></childa>
<br />
<childb></childb>
</div>
</template>
<script>
import childa from './childa.vue';
import childb from './childb.vue';
export default {
components:{
childa,
childb
},
data(){
return {
msg:""
}
},
methods:{ }
}
</script>
————————————————
版权声明：本文为CSDN博主「骚φ(゜▽゜*)♪白」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/chaochao466/article/details/82884966
最新文章
- ini_set("display_errors","On");和error_reporting(E_ALL);
- C/C++语法知识：typedef struct 用法详解
- [Flex] ButtonBar系列——flex3 皮肤和外观设置
- hdu 5183 Negative and Positive (NP)
- JSONObject 包的依赖
- oracle中的记录类型
- 12天学好C语言——记录我的C语言学习之路（Day 2）
- 【转】iOS-Core-Animation-Advanced-Techniques（二）
- OpenGL鼠标旋转图像
- SQLite存储区的日志模式
- 【Mac】-NO.133.Mac.1 -【重置忘记macos root密码】
- Beta冲刺四
- Python集合(set)
- 利用JavaScript jQuery实现图片无限循环轮播(不借助于轮播插件)-----转载
- 无线模块 RXB12-315m TXB12-315M 应用
- [CF1009G]Allowed Letters[贪心+霍尔定理]
- Gson转换时,Double转式化
- 十一、springboot之web开发之Filter
- 对java沙箱机制的一点了解
- wamp上能够访问jsp(未解决 游客勿看)