vue组件通信

系列文章目录

提示：主要是在vue2中需要使用到的组件通信方法
例如：

---

提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：主要是工作中，出现的组件传递方式，进行总结；

例如：常见的信息来自父组件，子组件输入框信息关联到父组件传递的数据，如果直接在子组件修改影响vue响应式结构

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、父传递子，子修改父

提示：以下是本篇文章正文内容，下面案例可供参考

1.Props（属性）

Props（属性）：通过在父组件中使用props属性，可以向子组件传递数据。在子组件中，通过props属性接收传递过来的数据。这是Vue中最基本的组件通信方式之一

// 父 ：ParentComponent.vue 通过`v-bind` 将`parentMessage`信息传递给子组件
<template>
  <ChildComponent :message="parentMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
};
</script>

// 子： ChildComponent.vue  使用`props` 属性获取父组件传递的值。
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2.事件

子组件可以使用 $emit,让父组件监听到自定义事件

// ChildComponent.vue 通过`$emit` 方式信息 
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from Child!');
    }
  }
};
</script>

// ParentComponent.vue 自定义监听事件 
<template>
  <ChildComponent @message="handleMessage" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message); // Output: Hello from Child!
    }
  }
};
</script>

3.子组件修改父变量

示例：在实际的开发中，一般父子之间，通过使用props 来实现传递，子通过 $emit 事件发送，但是
问题： 可能场景需要子存在数据不停要改变，但是数据来自父组件，如果子手动修改父组件的属性，打破了vue的响应式,可能不行，
**例如：**数据是父组件 通过v-model 给子组件，子组件将父组件数据绑定给input,输入框内容改变修改父组件

:isEdit="isEdit" @upate:isEdit="isSonEdit => isEdit = isSonEdit" 

// 子：ChildComponent.vue 通过`$emit` 方式信息 
<template>
  <input v-model="isSelfmessage"></input>
</template>

<script>
export default {
  props: ['message']，
   //监听属性 类似于data概念
   computed: {
        isSelfmessage: {
            get() {
                return this.message
            },
            set(v) {
                this.$emit('update:message', v)
            }
        }
    },
};
</script>

// 父：ParentComponent.vue 自定义监听事件 
<template>
  <ChildComponent :message="parentMessage"  @update:message="v=>(parentMessage = v)" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent!'
    };
  }
  methods: {
  }
};
</script>

// 父vue：组件中使用 
:isEdit="isEdit" @upate:isEdit="v=> isEdit = v"

// 子vue:在计算属性comput中
    //监听属性 类似于data概念
    computed: {
        isSelfEdit: {
            get() {
                return this.isEdit
            },
            set(v) {
                this.$emit('upate:isEdit', v); 
            }
        }
    },

3. watch监视

二、隔代组件信息传递

问题：在开发草地补播项目，index->cesiumMap->CesiumDraw->[…]

组件嵌套太严重；一般情况，使用信息中间事件总线 (EventBus)

1. 事件总线 (EventBus)`

代码如下（示例）： Vue.prototype.$EventBus = new Vue()

// 把EventBus挂载到了Vue的原型上, 保证所有的组件都能通过 this.$EventBus访问到事件总线
Vue.prototype.$EventBus = new Vue()

1）.订阅事件-接收值

在组件 created

    //生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.$EventBus.$on("sendMsg", this.send)
        this.$EventBus.$on("update:pvGroupInfoList", this.updatePvGroupInfoList)
        // this.$bus.$on('事件名', 事件回调函数)
        this.$EventBus.$on('send', msg => {
        console.log(msg)
        })
    },
    //方法集合
    methods: {
       updatePvGroupInfoList(params) {
            // console.log('数组包含',params);
        },
    }
   

2）.发布事件-发送值

// this.$EventBus.$emit('事件名', 额外参数)
this.$EventBus.$emit('send', 'hello')

 this.$EventBus.$emit("update:pvGroupInfoList", v)
 

2.读入数据

代码如下（示例）：

data = pd.read_csv(
    'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv')
print(data.head())

该处使用的url网络请求的数据。

---

总结

提示：这里对文章进行总结：

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。