vue 组件间通信方式

1、props传递数据（父 → 子）

2、v-model（双向绑定）

3、.sync（双向绑定）

4、ref（使用 ref 属性获取子组件的实例或 DOM 元素）

5、$emit / v-on（子组件向父组件发送数据）

6、$attrs 和 $listeners(vue3废弃) （父组件向子组件传递非props数据与事件）

7、$children(vue3废弃) & $parent（通过父/子组件实例的引用进行通讯）

8、provide / inject （祖先组件向后代组件传送数据）

9、EventBus（使用 Vue 实例作为事件总线，在组件之间传递数据）

10、vuex（用于管理大型应用程序中的状态管理）

11、插槽 slot

默认插槽

具名插槽

作用域插槽

12、$root

13、Teleport：在DOM树中任意位置渲染组件

1、props传递数据（父 → 子）

在父组件子组件添加自定义属性，挂载需要传递的数据，子组件用 props 来接受，接收方式也可以是数组，也可以是对象，子组件接收到数据之后，不能直接修改父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 $emit

// Parent.vue
<template><child :msg="msg"></child>
</template>

// Child.vue
export default {// 写法一 用数组接收props: ['msg'],// 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等props: { msg: {type: String,default: '这是默认数据'}},mounted() {console.log(this.msg)},
}

2、v-model（双向绑定）

v-model 实际上是语法糖，它通过绑定 value 属性和监听 input 事件来实现双向绑定。当子组件的输入（即 value）发生变化时，触发 input 事件，父组件监听到这个事件后更新相应的数据，从而实现数据的双向同步。

// Parent.vue
<template><child v-model="msg"></child>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child},data() {return {msg: ''}}
};
</script>

// Child.vue
<template><input :value="value" @input="$emit('input', $event)" />
</template>
<script>
export default {props: ["value"],
};
</script>

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 属性用于不同的目的。model 选项可以用来避免这样的冲突

// Parent.vue
<template><child v-model='count'></child>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child},data() {return {count: 1}}
};
</script>

// Child.vue
<template><input :value="num" @input="$emit('change', $event)" />
</template>
<script>
export default {model: {prop: 'num',event: 'change'}props: ["num"],
};
</script>

3、.sync（双向绑定）

可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据

// Parent.vue
<template><child :msg.sync="msg"></child>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child},data() {return {msg: ''}}
};
</script>

// Child.vue
<template><input :value="msg" @input="$emit('update:msg', $event)" />
</template>
<script>
export default {props: ["msg"],
};
</script>

4、ref（使用 ref 属性获取子组件的实例或 DOM 元素）

ref 如果在普通的 DOM 元素上，引用指向的就是该 DOM 元素;

如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

// Parent.vue
<template><child ref='child'></child>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child},data() {return {}},mounted() {const child = this.$refs.child;// 获取子组件的数据console.log(child.str); child.fn("调用子组件的方法");}
};
</script>

// Child.vue
<template><input type="text" />
</template>
<script>
export default {data() {return {str: "我是 Child",};},methods: {fn(str) {console.log(str);},},
};
</script>

5、$emit / v-on（子组件向父组件发送数据）

在父组件中给子组件绑定自定义事件，然后调用需要的方法，然后在子组件中用 this.$emit 触发父组件的事件，第一个是事件名，第二个是参数

// Parent.vue
<template><child @fn='fn'></child>
</template>
<script>
import Child from './Child.vue'
export default {components: { Child},data() {return {}},methods: {fn(e) {console.log("子传父" + e);},}};
</script>

// Child.vue
<template><input type="text" @blur="fn('我是子组件，可以传参数')" />
</template>
<script>
export default {data() {return {};},methods: {// 失去焦点发送fn(e) {this.$emit("fn", e);},},
};
</script>

6、$attrs 和 $listeners(vue3废弃) （父组件向子组件传递非props数据与事件）

当要和一个嵌套很深的组件进行通信时，如果使用 prop 和 events 就会显的十分繁琐，中间的组件只起到了一个中转站的作用，像下面这样

<!--父组件-->
<template><child :name="name" :message="message" @eventOne='eventHandler' @click.native='clickHandler'></child>
</template>
data() {return {name: '父组件',message: 'Hi',}
},
methods: {eventHandler() {console.log('触发了Parent中的eventHandler s-z-h')},clickHandler() {console.log('触发了Parent中的clickHandler')}
}<!--子组件 Child.vue-->
<template><grand-child v-bind="$attrs" v-on="$listeners"></grand-child>
</template><!--孙子组件 grandChild.vue-->
<template><div></div>
</template>
created() {// 触发父组件的 send 函数this.$emit('send', 'hello') 
},
mounted() {// 可以拿到父组件传来的数据console.log(this.$attrs); // 父组件监听了两个事件，一个eventOne， 一个click，// 由于click被native修饰了，故$listerners 只有eventOne事件console.log(this.$listeners) 
}

当要传递的数据很多时，就需要在中间的每个组件都重复写很多遍，反过来从后代组件向祖先组件使用 events 传递也会有同样的问题。使用 $attrs 和 $listeners 就可以简化这样的写法。
$ attrs 会包含父组件中没有被 prop 接收的所有属性（不包含class 和 style 属性），可以通过 v-bind=“$attrs” 直接将这些属性传入内部组件。
$ listeners 会包含所有父组件中的 v-on 事件监听器 (不包含 .native 修饰器的) ，可以通过 v-on=“$listeners” 传入内部组件。
这种方式的传值虽然说不常用，可读性不是很好。但其对于组件层级嵌套比较深，使用props会很繁琐，或者项目比较小，不太适合使用 Vuex 的时候，可以考虑用它$children / $parent的使用

`7、$children(`vue3废弃`) & $parent（`通过父/子组件实例的引用进行通讯`）`

$children：获取到一个包含所有子组件(不包含孙子组件)的 VueComponent 对象数组，可以直接拿到子组件中所有数据和方法等
$parent：获取到一个父节点的 VueComponent 对象，同样包含父节点中所有数据和方法等

// 父组件
<template><div class=""><Child></Child></div>
</template>
<script>
import Child from "./Child.vue";
export default {data() {return {name: "父组件数据",};},mounted() {// 调用第一个子组件的方法this.$children[0].fn(); // 获取第一个子组件中的属性console.log(this.$children[0].name); },methods: {fn() {console.log("父组件里的方法 s-z-h");},},components: { Child },
};
</script>// 子组件
<template><div><input type="text" /></div>
</template>
<script>
export default {data() {return {name: "我是子里的数据",};},methods: {fn() {console.log("我是子组件方法");},},mounted() {// 调用父组件的方法this.$parent.fn(); // 获取父组件中的属性console.log(this.$parent.name); },
};
</script>

8、provide / inject （祖先组件向后代组件传送数据）

provide / inject 为依赖注入，说是不推荐直接用于应用程序代码中，但是在一些插件或组件库里却是被常用，所以我觉得用也没啥，还挺好用的

provide：可以让我们指定想要提供给后代组件的数据或方法
inject：在任何后代组件中接收想要添加在这个组件上的数据或方法，不管组件嵌套多深都可以直接拿来用

要注意的是 provide 和 inject 传递的数据不是响应式的，也就是说用 inject 接收来数据后，provide 里的数据改变了，后代组件中的数据不会改变，除非传入的就是一个可监听的对象

// 父组件 Home<template><div class=""><HelloWorld></HelloWorld></div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {data() {return {val: "父组件数据",};},provide() {return {name: this.val, // data 的数据someMethod: this.someMethod, // methods 中的方法};},methods: {someMethod() {console.log("这是注入的方法");},},components: { HelloWorld },
};
</script>
// 子组件 HelloWorld
<template><div><input type="text" /><SunChild></SunChild></div>
</template>
<script>
import SunChild from "./sun-child.vue";
export default {data() {return {};},inject: ["name", "someMethod"],mounted() {console.log(this.name);this.someMethod();},components: { SunChild },
};
</script>
// 孙组件SunChild 也可以拿数据
<script>
export default {data() {return {};},mounted() {},inject: ["name", "someMethod"],mounted() {console.log(this.name);this.someMethod();},
};
</script>

9、EventBus（使用 Vue 实例作为事件总线，在组件之间传递数据）

EventBus 是中央事件总线，不管是父子组件，兄弟组件，跨层级组件等都可以完成通信

// 找到main.js 加入一下代码  公共的$bus
Vue.prototype.$bus = new Vue()

// 父组件 也可以兄弟a
<template><div class=""><Child></Child></div>
</template>
<script>
import Childfrom "./Child.vue";
export default {data() {return {};},mounted() {this.$bus.$on("fn", (value) => {console.log(value);});},components: { Child },
};
</script>// 子组件 也可以兄弟b
<template><div><input type="text" @blur="fn" /></div>
</template>
<script>
export default {data() {return {};},methods: {fn() {this.$bus.$emit("fn", "可以父子通信，也可以兄弟通信,s-z-h");},},
};
</script>

10、vuex（用于管理大型应用程序中的状态管理）

可以定义共享的数据源，在哪里都可以访问安装配置使用即可

// vuex 里定义共享的数据，在哪个组件都可以访问
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import vuexPersist from "vuex-persist";
export default new Vuex.Store({// 定义数据state: {data: 'vuex 的数据',a: 1,b: 2,},// 定义修改数据的方法mutations: {},// 处理异步操作actions: {},modules: {},getters: {num(state) {return state.a + state.b}},
})

<template><div class="">{{ data }}{{ num }}</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {data() {return {};},// 辅助函数computed: { ...mapState(["data"]), ...mapGetters(["num"]) },// 第二种 希望你会举一反三// computed: {//   data() {//     return this.$store.state.data;//   },// },components: {},
};
</script>

11、插槽 slot

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，

适用于父组件 ===> 子组件

默认插槽

// Parent.vue
<Child><div>html结构1</div>
</Child>// Child.vue
<template><div><!-- 定义插槽 此处将被渲染成  <div>html结构1</div> --><slot>插槽默认内容...</slot></div>
</template>

具名插槽

在父组件中通过 slot 属性，给插槽命名，在子组件中通过 slot 标签，根据定义好的名字填充到对应的位置

// Parent.vue
<Child><template slot="center"><div>html结构1</div></template><template v-slot:footer><div>html结构2</div></template>
</Child>// Child.vue<template><div><!-- 定义插槽 --><!-- 此处渲染 <div>html结构1</div> --><slot name="center">插槽默认内容...</slot><!-- 此处渲染 <div>html结构2</div> --><slot name="footer">插槽默认内容...</slot></div></template>

作用域插槽

带数据的插槽，子组件提供给父组件的参数，父组件根据子组件传过来的插槽数据来进行不同的展现和填充内容。在标签中通过 v-slot="value" 来接受数据。作用域插槽和具名插槽可以结合使用

// Parent.vue
"<Child><template scope="scopeData"><!-- 生成的是ul列表 --><ul><li v-for="g in scopeData.games" :key="g">{{g}}</li></ul></template>
</Child><Child><template slot-scope="scopeData" slot="s1"><!-- 生成的是h4标题 --><h4 v-for="g in scopeData.games" :key="g">{{g}}</h4></template>
</Child>// Child.vue
<template><div><slot :games="games" name="s1"></slot></div>
</template><script>export default {name:'Child',props:['title'],//数据在子组件自身data() {return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}},}
</script>

作用域插槽和具名插槽可以结合使用

12、$root

$root 可以拿到根组件 App.vue 里的数据和方法

// Home 父组件访问数据
<template><div class=""><Child></Child></div>
</template>
<script>
import Child from "./Child.vue";
export default {data() {return {};},mounted() {// 获取根组件的数据console.log(this.$root.foo);},components: { Child }
};
</script>// Child 子组件添加数据
<template><div></div>
</template>
<script>
export default {data() {return {};},mounted() {// 写入根组件的数据this.$root.foo = 2;},methods: {},
};
</script>

13、Teleport：在DOM树中任意位置渲染组件

Teleport 是 Vue 3 中新增的特性，用于在组件的模板中将内容渲染到 DOM 树中的任意位置，而不受组件层次结构的限制。它适用于需要在组件之外渲染内容的场景，比如弹出框、对话框等。

以下演示如何使用 Teleport 渲染一个弹出框：

<template><div><button @click="showModal = true">Show Modal</button><Teleport to="body"><Modal v-if="showModal" @close="showModal = false"><!-- Modal Content --></Modal></Teleport></div>
</template><script>
import { ref } from 'vue';
import Modal from './Modal.vue';export default {components: {Modal,},setup() {const showModal = ref(false);return {showModal,};},
};
</script>

在这个示例中，当点击 "Show Modal" 按钮时，Teleport 将 <Modal> 组件的内容渲染到 <body> 元素下，而不受组件层次结构的影响。这样可以确保弹出框的样式和行为在不同层次的组件中都是一致的。

需要注意的是，Teleport 在渲染内容时仍然会受到 CSS 层叠上下文和层次结构的影响，因此需要在使用时注意样式的调整。

总结起来，Teleport 是一个很有用的特性，可以方便地将组件的内容渲染到任意位置，增强了 Vue 在处理 UI 布局和渲染方面的灵活性。