Vue组件通信常用的的几种方式

最新推荐文章于 2022-03-08 17:25:53 发布

ToDeer

最新推荐文章于 2022-03-08 17:25:53 发布

阅读量264

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_46031235/article/details/107416124

版权

Vue 专栏收录该内容

4 篇文章

订阅专栏

Vue组件通信常用的的几种方式

一. 父传子：主要通过props来实现

具体实现：父组件通过 import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过 props 接收，接收有两种形式：
一是通过数组形式[‘要接收的属性’ ]，
二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收

<!--父组件-->
<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one :parentMessage="parentMessage"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是来自父组件的消息',
      };
    },
  };
</script>
<style scoped>
</style>

<!--子组件-->
<template>
  <div>
    <h3>我是子组件一</h3>
    <span>{{parentMessage}}</span>
  </div>
</template>
<script>
  export default{
    props: ['parentMessage'],
  };
</script>
<style scoped>
</style>

二：子传父：主要通过$emit 来实现

具体实现：子组件通过通过绑定事件触发函数，在其中设置this. $e m i t (‘ 要派发的自定义事件 ’ ，要传递的值) ，$ emit中有两个参数一是要派发的自定义事件，第二个参数是要传递的值

<!--父组件-->
<template>
  <div>
    <h2>父组件</h2>
    <br>
    <Child-one @childEvent="parentMethod"></Child-one>
  </div>
</template>
<script>
  import ChildOne from './ChildOne';

  export default{
    components: {
      ChildOne,
    },
    data() {
      return {
        parentMessage: '我是来自父组件的消息',
      };
    },
    methods: {
      parentMethod({ name, age }) {
        console.log(this.parentMessage, name, age);
      },
    },
  };
</script>
<style scoped>
</style>

<!--子组件-->
<template>
  <div>
    <h3>我是子组件一</h3>
  </div>
</template>
<script>
  export default{
    mounted() {
      this.$emit('childEvent', { name: 'zhangsan', age:  10 });
    },
  };
</script>
<style scoped>
</style>

兄弟之间传值有两种方法

三：通过 event bus 实现：

具体实现:创建一个空的 vue 并暴露出去，这个作为公共的 bus,即当作两个组件的桥梁，在两个兄弟组件中分别引入刚才创建的bus，在组件 A 中通过 bus. $e m i t （ ’ 自定义事件名 ’ ，要发送的值）发送数据，在组件 B 中通过 b u s .$ on（‘自定义事件名‘,function(v) { //v 即为要接收的值 }）接收数据

四：通过 vuex 实现

具体实现：vuex 是一个状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括 state,actions,mutations,getters 和 modules 5 个要素，主要流程：组件通过 dispatch 到 actions，actions 是异步操作，再 actions中通过 commit 到 mutations，mutations 再通过逻辑操作改变 state，从而同步到组件，更新其数据状态

mutations:{
updateSearch(state,item){
      state.searchword=item
    },
}
actions:{
updateSearch(context,item){
        context.commit("updateSearch",item)
      },
}
 //vue文件中
methods: {
        click_item(item){
            this.$store.dispatch('updateSearch',item);
        },