vue 组件间通信方式

橘子味的冰淇淋~

已于 2024-04-19 08:55:24 修改

阅读量1.3k

点赞数 30

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2024-04-17 11:05:14 首次发布

本文链接：https://blog.csdn.net/m0_73531461/article/details/137810236

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中组件间通信的多种方式，如props、v-model.sync、ref、$emit、$parent、$attrs/$listeners、EventBus、vuex以及插槽（包括默认插槽、具名插槽和作用域插槽）的使用。此外，还涵盖了$root和Vue3的Teleport功能。

摘要由CSDN通过智能技术生成

根据组件间关系讨论

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（用于管理大型应用程序中的状态管理）

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

根据组件间关系讨论

组件关系	通信方式
父子组件	props v-model .sync $emit $parent $refs 插槽 slot eventBus vuex
兄弟组件	$parent eventBus vuex
跨层级关系	provide / inject $attrs $root eventBus vuex

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 布局和渲染方面的灵活性。