组件通信6种方式
- 1.props
- 2.自定义事件
- 3.全局事件总线 $bus
- 4.pubsub-js
- 5.Vuex
- 6.插槽
自定义事件深入
v-model深入
- v-model基本使用：收集表单数据
- v-model实现原理：:value + @input
- 深入学习v-model，实现父子组件数据同步（父子组件通信）
属性修饰符sync
\$attrs与$listeners
\$children与$parent
- ref
- $children
- $parent
- ref与$children区别
mixin
插槽

不熟悉组件通信，写分页器组件时太难受了…

b站视频链接

组件通信6种方式

今天面试被问到了兄弟组件通信，突然有点懵，只想出了一个全局事件总线
Vue 兄弟组件之间的通信

1.props

适用场景：父子组件通信

2.自定义事件

适用场景：子组件给父组件通信
$on与$emit

3.全局事件总线 $bus

适用场景：万能
Vue.prototype.$bus=this;
$emit发布事件，$on监听事件
详情参考这篇

4.pubsub-js

适用场景：万能
React框架中使用比较多，套路：发布与订阅

5.Vuex

适用场景：万能

6.插槽

适用场景：父子组件通信
三种：默认插槽、具名插槽、作用域插槽

自定义事件深入

event：事件对象

事件分为系统事件（click、双击、鼠标系列…）和自定义事件
无论是系统事件还是自定义事件，都要注意三点：事件源（事件是给谁绑定的）、事件类型（单机还是双击等等）、事件回调
原生DOM绑定系统事件（原生事件）：比如button可以绑定click单击事件等
对于组件标签，也可以绑定系统事件，但会不起作用：比如给Event组件绑定click事件，在此click事件就不是原生事件，而属于自定义事件。若想给组件标签绑定原生事件，加个时间修饰符.native即可。也就是 <Event @click.native="handler"></Event> 当前原生DOM click事件，其实是给组件的根标签绑定了点击事件，此处利用了事件委派
注：.natve在vue3中已被废弃
给原生DOM绑定自定义事件没任何意义，因为没办法触发$emit函数

v-model深入

v-model是Vue框架中的指令，主要结合表单元素（比如文本框、复选、单选按钮等）一起使用，主要作用是收集表单元素，它也是组件通信方式的一种，可以实现数据的双向绑定。

v-model基本使用：收集表单数据

<template><div><h2>深入v-model</h2><input type="text" v-model="msg"><span>{{msg}}</span><br></div>
</template><script type="text/ecmascript-6">// import CustomInput from './CustomInput.vue'export default {name: 'ModelTest',components: {// CustomInput},data(){return {msg:'赵丽颖'}}}
</script>

v-model实现原理：:value + @input

<input type="text" :value="msg" @input="msg = $event.target.value">

Vue2可通过value与input事件实现v-mdel功能：原生DOM中有oninput事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化时就会触发一次回调。

深入学习v-model，实现父子组件数据同步（父子组件通信）

<input type="text" :value="msg" @input="msg = $event.target.value">

Vue-组件通信6种方式相关推荐

Vue组件通信的六种方式
前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D ...
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组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
vue组件通信的几种方法
vue中我们最常使用的就是父子之间的通信还有全局数据管理vuex了,下面粗略说一下vue组件通信的几种方法组件通信的几种方式 1.父子组件通信 2.兄弟组件通信 3.跨多层级组件通信 4.任意组件( ...
vue 实例化几种方式_vue注册组件的几种方式总结
vue注册组件的几种方式总结 1.全局注册(这种方式注册组件必须在vue实例化之前声明) Vue.component('tag-name',{}) 2.局部注册 var Child = { templ ...

Vue-组件通信6种方式

目录