Vue 兄弟组件通信(不使用Vuex)
来源:互联网 发布:淘宝网男运动套装 编辑:程序博客网 时间:2024/05/13 08:25
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>
第二步,我们要在父组件中去监听这个自定义事件,去触发对应的方法,并接受a组件传过来的参数。此时我们就完成了子组件向父组件传值的过程。
示例中,<aPage @isLogFn = "lisLogFn"></aPage>
监听isLogFn 去触发我们在父组件中定义的方法lisLogFn,并拿到传过来的 ‘log’ 数据。完成子父传值。
到此,整个过程还没有结束,只是完成了一半。接下来我们要完成父子组件传值,将a组件的信息在传给b组件。
在< bPage > 标签中绑定islog 属性,动态绑定data中的login 字段,在我们通过lisLogFn 方法拿到 ‘data’之后,我们要判断 data 传过来的数据,根据判断结果去改变data()中的数据,从而将数据传递给b组件
App.vue
<template> <div id="app"> <aPage @isLogFn = "lisLogFn"></aPage> <bPage :isLog = "login"></bPage> </div></template><script>import aPage from './components/a.vue'import bPage from './components/b.vue'export default { data () { return { login: 'false' } }, name: 'app', components: { aPage, bPage }, methods: { lisLogFn (data) { if (data == 'log') { this.login = 'true' } } }}</script><style></style>
最后,b组件中需要创建props,定义一个isLog 属性,这个属性就是我们传过来的数值。然后我们在计算属性中处理这个数据,最终供b组件使用。示例中,我们在v-show="isLogin"
中用来控制弹窗是否打开。
切记!不能直接使用这个props,一定要经过computed处理,原因我引用vue官方说明
单向数据流
b.vue
<template> <div class="bdiv" v-show="isLogin">我是组件B弹窗</div></template><script>export default { props: ['isLog'], data () { return { } }, computed: { isLogin () { if(this.isLog == 'true'){ return true } else { return false } } }}</script><style> .bdiv{ width: 200px; height: 200px; border: 1px #000 solid; margin: 0 auto; }</style>
总结: 想要实现兄弟组件传值,一定要首先熟悉子父,父子之间的传值。
子父:
- 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
- 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
- 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
父子:
- 子组件在props中创建一个属性,用以接收父组件传过来的值
- 在子组件标签中添加子组件props中创建的属性,把需要传给子组件的值赋给该属性
文中示例 github 地址:https://github.com/enjoy-pany/vue-emit
参考资料:http://www.cnblogs.com/daiwenru/p/6694530.html
- Vue 兄弟组件通信(不使用Vuex)
- Vue 兄弟组件通信(不使用Vuex)
- vue中兄弟组件通信
- vue 页面跳转(兄弟组件)通过路由或vuex 进行传递参数,并且实现刷新数据不消失
- 使用Vue开发网站之路2-多组件通信2(利用Vuex进行数据传递)
- vue开发:Vue 非父子组件通信方法(非Vuex)
- Vue兄弟组件之间的通信(EventBus)
- Vue之父子兄弟组件间通信
- Vue 进阶教程之:非父子组件通信方法(非Vuex)
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
- 自定义vue全局组件use使用、vuex的使用
- Vue---使用vuex
- Vue---使用vuex
- VueJS兄弟组件通信
- 使用Vue开发网站之路2-多组件通信3(父子间通信,组件与vue通信)
- vue 兄弟组件之间传数据之$emit 和 $on 组件通信
- vue-cli 中使用Vuex
- 使用bus实现Vue组件间通信
- UVALive2536 POJ1248 HDU1015 ZOJ1403 Safecracker【密码+暴力】
- hash哈希--简单说
- spring源码(4)Register the bean definitions(3)
- ubuntu 16.04 安装caffe的教程
- BigInteger
- Vue 兄弟组件通信(不使用Vuex)
- java学习中关于封装
- 利用File以及IO流来实现复值文件夹
- crontab 定式调度
- C代码:一阶二阶多项式曲线拟合
- hdu 2036 改革春风吹满地
- 模拟面试总结
- easyui_Datagrid 数据网格 loadData
- 1010. 一元多项式求导 (25)