Vue中常见的组件间通信方案及典型应用场景
时间：2023-03-14 11:14:16
科技观察
什么是组件通信所谓组件通信就是组件之间的数据交互，即一个组件A中的数据传递给另一个组件B，并且可以makeComponentB根据这些数据更新接口。在Vue中，有许多可用的通信方案。下面介绍几种常见的组件通信方案及其典型应用场景。1.父子组件通信场景父子组件通信是最典型的组件通信场景，没有之一，它们之间的通信主要使用自定义属性或者ref。首先是自定义属性，应用广泛。使用子组件中的props选项接收，子组件返回数据给父组件，使用自定义事件，使用子组件中的$emit()方法触发执行，并将数据返回给父组件。//定义组件h1-boxVue.component("h1-box",{//通过props设置自定义属性title接收组件的外部值props:["title"],//设置自定义事件通过emits事件向外发送Eventemits:['give'],methods:{clickHandler(){//通过$emit()方法触发执行，带出当前组件数据this.$emit('give',{name:'lucy'})}},mounted(){//通过this.title可以获取外部传入组件的值console.log(this.title);},});第二种是使用ref来实现通信。我们知道使用ref可以快速访问一个组件实例对象及其内部数据和方法。在这种情况下，借助父组件中的refs调用子组件中的方法，并将事件参数传递给子组件。当然需要注意的是，在Vue开发中，要尽量减少ref的使用。
newVue({el:"#app",mounted(){//get对组件实例，可以操作组件实例console.log(this.$refs.son);letvm2=this.$refs.son;//修改子组件的响应数据msgvm2.msg="sz2111";//调用子组件的changeMsg方法vm2.changeMsg("sz2116");},components:{//定义子组件son:{data(){return{msg:"sz2114",};},方法:{changeMsg(val){this.msg=val;},},模板:`
helloworld
`,},},});2.兄弟组件通信场景该场景使用状态提升，这个概念来源于React中状态提升的思想。所谓statepromotion就是当两个组件要共享一段数据时，我们可以找到这两个组件最近的父组件，在最近的父组件中定义要共享的变量，然后通过props向下传递到子组件。需要注意的是，状态提升适用于应用程序在简单的兄弟组件之间进行通信。当遇到更复杂的组件关系时，使用状态提升就变得麻烦了。上图中，如果要点击Font按钮改变主题的字体大小，即Title和Font组件的字体大小都会改变。如果Title和Font组件都维护自己的组件状态数据，就不容易传递数据，那么可以将它们的状态存储在公共的父组件状态中，即状态提升。
//父组件newVue({el:'#app',data:{//将子组件需要的数据存放在公共父级fontSizeonthecomponent:12}})//子组件Vue.component('font',{//接受父组件通过自定义属性传入的值props:['font'],template:`
