没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Vue 兄弟组件通信的方法(不使用兄弟组件通信的方法(不使用Vuex))
本篇文章主要介绍了Vue 兄弟组件通信的方法(不使用Vuex),小编觉得挺不错的,现在分享给大家,也给大
家做个参考。一起跟随小编过来看看吧
项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一
些小型的项目中,我们就没有必要去引入vuex。下面简单介绍一下使用传统方法,实现父子组件通信的方法。
简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出。
主要的思路就是:先子传父,在父传子先子传父,在父传子
首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事
件,并传递我们的参数。
示例中我们通过this.$emit() 去触发isLogFn 这个方法自定义事件,并将log 参数传递出去
a.vue
<template>
<div class="adiv">
<p>a组件</p>
<button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
</div>
</template>
<script>
export default {
methods: {
handleClick () {
this.$emit('isLogFn','log')
}
}
}
</script>
<style>
.adiv{
width: 400px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
}
</style>
资源评论
weixin_38670433
- 粉丝: 9
- 资源: 899
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功