目录

组件之前的通信方法

1. props/$emit

2.parent/children

3.ref

4.v-model

5.sync

6.attrs,attrs,attrs,listeners

7.provide/inject

7.eventBus

组件之前的通信方法

1. props/$emit

父传子 props 这个只能够接收父组件传来的数据 不能进行修改 可以静态传递 也可以动态传递（一个表达式，一个对象或者布尔值等）父组件属性绑定 子组件用props接收

子改父 emit子组件的内部通过emit 子组件的内部通过emit子组件的内部通过emit去触发这个事件 同时也可以传参过去 v-on去传递事件是写在子组件的标签身边的，然后回调函数是写在父组件的methods身上的

//父组件
{{msg}}
import child from "../components/Child";export default {data() {return {msg: "hello"};},components: { child },methods:{ changeMsg(value){this.msg=value }}};// 这是子组件改变父组件的{{msg}}export default {props: ["msg"],methods:{ change(){ this.$emit("changeMsg",123) }}};

2.parent/children

$parent 子组件可以获取到父组件身上的属性以及方法，但是一定要注意，如果说这个组件的父组件不止一个的话 那么容易发生报错

children父组件拿到自己身上的子组件的属性已经方法，如果身上的子组件不止一个的话打印this.children 父组件拿到自己身上的子组件的属性已经方法，如果身上的子组件不止一个的话 打印this.children父组件拿到自己身上的子组件的属性已经方法，如果身上的子组件不止一个的话打印this.children的时候会以数组的形式展示出来

3.ref

父组件想要拿到子组件身上的数据 还可以给子组件写上ref=”名字” 然后在父组件身上 this.$ref.名字就可以拿到子组件 身上的方法已经数据都可以获取到

4.v-model

v-model:将数据传递下去的同时 子组件可以修改父组件提供过来的数据（emit方法）

// 这是父组件
{{msg}}
import child from "../components/Child";export default {data() {return {msg: "hello"};},components: { child }};// 这是子组件export default {props: ["value"]};

5.sync

sync:将数据传递下去的同时 允许子组件可以修改数据

// 父组件{{num}} import childA from "../components/ChildA";export default {data() {return {num: 0};},components: { childA }};// 子组件 ADDexport default {data() {return {counter: this.count};},props: ["count"],methods: {handleAdd() {this.$emit("update:count", ++this.counter);}}};

6.attrs,attrs,attrs,listeners

attrs包含的是父组件不被prop所识别的特性（：inheritAttrs为true属性才会渲染false时属性不会被渲染）可以通过v−bind=”attrs 包含的是父组件不被prop所识别的特性 （：inheritAttrs为true 属性才会渲染 false时 属性不会被渲染） 可以通过v-bind=”attrs包含的是父组件不被prop所识别的特性（：inheritAttrs为true属性才会渲染false时属性不会被渲染）可以通过v−bind=”attrs”传给内部的组件 listeners包含父组件啊种v−on事件监听器通过v−on=”listeners 包含父组件啊种v-on事件监听器 通过v-on=”listeners包含父组件啊种v−on事件监听器通过v−on=”listeners” 传给内部的足迹爱

{{ count }}
import son from "./son.vue";export default {name: "FatherVue",components: { son },data() {return {msg: "父组件的msg",foo: "Javascript",boo: "Html",coo: "CSS",doo: "Vue",};},computed: {count() {return this.$children[0] && this.$children[0].count;},},mounted() {console.log(this.$children); // [子组件1， 子组件2，......]},methods: {handleClick() {console.log("handleClick");},handleFocus() {console.log("handleFocus");},},};{{ msg }}
father 父组件的$attrs: {{ $attrs }}
import smallson from "./smallson.vue";export default {name: "FuSon",components: { smallson },inheritAttrs: true, // 可以关闭自动挂载到组件根元素上的没有在props声明的属性computed: {msg() {return this.$parent.msg;},},data() {return {count: "我是子组件的count",};},methods: {handleClick() {console.log(this.$listeners);},},};
smallson
{{ $attrs }}export default {name: "SmallSon",inheritAttrs: false,};

7.provide/inject

provide 提供变量 inject 注入变量

：

  1. 不论层级多深 只要调用了inject那么久可以注入provide的变量
  2. provide提供的数据在父组件中假设发生了变化 默认后辈的组件是不会响应式变化的 但是如果给的数据是this的数据的话 那么就是响应式的书
import myInject from "./components/zujiantongxin/inject.vue";export default {name: "App",provide: {for: "provide", },// provide() {// return {// baba: this,// msg: this.msg,// };// }, 这个时候的数据就可以做到响应式的了 给的就是this的数据 给的就是响应式的数据 就可以做到响应式components: {myInject,},};
inject 组件
{{ for1 }}
export default {name: "myInject",data() {return {for1: this.for,//这一步可以省略的};},inject: ["for"],mounted() {console.log(this.for);},};

7.eventBus

EventBus 本质上就是一个vue实例对象，它可以实现兄弟组件之前的通信，首先在A组件中设置EventBus.on自定义事件名称以及回调函数，然后B组件就是通过eventbus.on自定义事件名称以及回调函数，然后B组件就是通过eventbus.on自定义事件名称以及回调函数，然后B组件就是通过eventbus.emit去触发那个自定义事件，将数据传递给A组件

Eventbus的原理实际上就是发布订阅的模式
发布订阅模式 ：其实就是一种对象间一对多的依赖关系，当一个对象的状态发生改变的时候，所有依赖于它的对象都将得到状态改变的通知

vue中常见的发布订阅就是emitemit emiton

redux中常见的就是subscribe

// eventBus.jsimport Vue from "vue";export default new Vue();
{{ msg }}
import eventBus from "./eventBus";export default {name: "面试ComA",data() {return {msg: "",};},mounted() {eventBus.$on("message", (val) => {this.msg = val;});},};import eventBus from "./eventBus";export default {name: "面试ComB",data() {return {};},methods: {sendMsg() {eventBus.$emit("message", "我是来自comB的数据");},},};import comA from "@/components/zujiantongxin/comA.vue";import comB from "@/components/zujiantongxin/comB.vue";export default {name: "App",components: {comA,comB,},};