vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法
组件通信的几种方式
1、父子组件通信
2、兄弟组件通信
3、跨多层级组件通信
4、任意组件(vuex)
一、父子组件
1、父组件通过props传递数据给子组件,子组件通过$emit发送事件传递数据给父组件(单向数据流)
2、还可以通过v-model语法糖(双向数据绑定)
3、$parent,$children对象来访问组件实例中的方法和数据
4、$listeners,$sync(2.3版本以上),$listeners属性会将父组件中(不含.native修饰器)v-on事件监听器传给子组件,子组件可以通过访问$listeners来自定义监听器,.sync属性是个语法糖,可以简单的实现子组件与父组件通信
5、$ref也可进行组件通信,放在组件上可以获取组件实例
<!--父组件中-->
<input :value.sync="value"/>
<!--以上写法等同于-->
<input :value="value" @undate:value="v=>value=v"></comp>
<!--子组件中-->
<script>this.$emit('update:value',1)
</script>
二、兄弟组件通信
1、可借助父组件当做通讯的桥梁
2、利用eventBus总线实现,(实际上就是新建一个vue实例,用eventBus.$emit替代this.$emit,一样用v-on监听事件变化)
// main.js
import Vue from 'vue'
import App from './App'export const eventBus = new Vue()new Vue({el: '#app',render: h => h(App)
})
在兄弟组件中导入
<!-- BrotherCard.vue --><script>import { eventBus } from '../main'
</script>
对于这种情况可以通过查找父组件中的子组件实现,也就是this.$parent.$childrren,在$children中可以通过组件name查询到需要的组件实例,然后进行通信。$children返回的是一个组件集合
1)$refs
首先,给子组件做标记,demo:
<firstchild ref="one"></firstchild>
然后再父子间中,通过this.$refs.one就可以访问到这个子组件了,包括访问子组件的data里面的数据,调用他的函数
三、跨多层级组件通信
provide / inject(常见得到就是无感刷新)
// 父组件 A
export default {provide: {data: 1}
}
// 子组件 B
export default {inject: ['data'],mounted() {// 无论跨几层都能获得父组件的 data 属性console.log(this.data) // => 1}
}
四、任意组件
使用vuex或者eventBus
全局数据管理大家都很熟悉,就不多累赘了
vue组件通信的几种方法相关推荐
- vue 组件通信的几种方式
前言 在vue中, 组件的关系不外乎以下三种: 组件是需要通信的,在开发中,常用到的通信方式有:vuex.eventBus.以及props与emit.$parent与$children,除此之外,还 ...
- Vue组件通信的五种方式
Vue组件通信的五种方式 文章目录 Vue组件通信的五种方式 一. props/$emit(父子通信) 二. vuex(组件之间通信) 三. 事件总线EventBus(组件之间通信) 四. provi ...
- vue组件通信的几种方式
vue组件通信的几种方式 最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Chil ...
- Vue组件传值的三种方法
Vue组件传值的三种方式 1.父传子 父传子使用props: 1.父组件:即在使用的子组件标签上,自定义一个绑定数据,这里我使用的是"mymsg",将父组件的msg绑定在其上. 2 ...
- vue组件通信的八种方式
一.props / $emit 父组件通过props的方式向子组件传递数据,而通过$emit 子组件可以向父组件通信. 1. 父组件向子组件传值 下面通过一个例子说明父组件如何向子组件传递数据:在子组 ...
- Vue组件通信的7个方法
1.props和$emit 父组件向子组件传递数据是通过prop传递的,子组件传递数据给父组件是通过$emit触发事件来做到的 Vue.component("child",{ da ...
- vue组件之间传值几种方法
方法一.父子组件传值 通过props向下传递 父组件 <div class="menu_header"><Menu :msgChild="msg1&qu ...
- Vue组件通信——父子组件通信的四种方法
引入组件 全局引入 在main.js文件中引入并注册 import ChildrenDemo from '@/views/components/ChildrenDemo' Vue.component( ...
- Vue笔记(六)——Vue组件通信Vuex
组件通信 vue本身的组件通信 父==>子:父组件向子组件传参或者调用子组件的方法 子==>父:子组件向父组件传参或者调用父组件的方法 兄弟之间:兄弟组件之间传参或者调用方法 父子通信 传 ...
最新文章
- winform如何保持TreeView节点展开和折叠的状态
- ORACLE学习笔记--性能优化2
- BZOJ2115: [Wc2011] Xor
- TikTok跨境出海:Tiktok怎么月入几十W?
- db2数据库还原找不到文件_DB2 还原数据库
- 『全球化产品』应该要避开的几个坑
- 区块链成熟度评测报告
- Navicat使用教程:使用Navicat Premium 12自动执行数据库复制(四)
- 容器化之后如何节省云端成本?(二十七)
- 【剑指offer】面试题35:复杂链表的复制(Java)
- python调用ping命令_在Python中调用Ping命令,批量IP的方法
- 自己定义AlertDialog对话框布局
- python的read_聊一聊python 的readinto
- 团队作业—第二阶段08
- java 注入为空_Spring @Autowired 注入为 null
- 北大青鸟c语言课后答案,北大青鸟C语言实现.ppt
- python怎么下载panda包_pandas python下载
- Android中.this的意思
- 世界名车各种图标及文字说明
- ffmpeg 安装bzlib_centos6中yum安装ffmpeg