$emit
1、单向绑定
子组件向父组件传值
2、使用示例
父组件
<template>
<div id="app">
<!-- 监听自定义触发事件 @emitInvokeEvents-->
<SonDemo @emitInvokeEvents="fatherFunction"></SonDemo>
</div>
</template>
<script>
import SonDemo from './components/SonDemo.vue'
export default {
name: 'App',
components: {
SonDemo
},
methods:{
fatherFunction(value){
console.log("父组件的方法被唤醒"+value)
}
}
}
</script>
子组件
<template>
<div>
<button @click="sonFunction">子组件向父组件传值</button>
</div>
</template>
<script>
export default {
methods:{
sonFunction(){
//emitInvokeEvents 自定义触发事件
//@emitInvokeEvents 监听自定义触发事件
//第一个参数:自定义事件
//第二个参数:传递的值
this.$emit('emitInvokeEvents','子组件向父组件传递的值');
}
}
}
</script>
效果文章来源:https://www.toymoban.com/news/detail-841817.html
文章来源地址https://www.toymoban.com/news/detail-841817.html
到了这里,关于VUE-组件间通信(二)$emit的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!