Vue组件通信四种方式

先来介绍一下Vue组件的类型

1.全局组件

Vue.component('my-component-name', {
  // ... 选项 ...
})
//使用时
<div id="app">
   <my-component-name></my-component-name>
</div>

2.局部组件

var ComponentA = {
    data:...
    template:...
    methods:...
}
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA
  }
})

3.单文件组件

.vue文件，一个文件就是一个组件，一般vue构建一个项目时用到。

//一般三部分组成
<template>
<style>
<script>

组件通信的方法

• props和$emit
  父组件给子组件传值：父组件给子组件设置自定义属性，子组件添加props来接受属性。
  子组件给父组件传值：父组件给子组件设置自定义函数，子组件通过$emit给父组件的自定义函数传递参数 ，父组件通过接收参数获取到子组件传递过来的值。

        let parent = {
            data: function () {
                return {
                    msg: '我是父组件',
                    msgToChild: '父组件给子组件的数据',
                    msgFromChild:'还未收到子组件的数据'
                }
            },
            methods: {
                fn(value){//父组件用来接收数据
                       this.msgFromChild = value
                }
            },
            template: `
            <div>
              <div>{{msg}}</div>
              <div>{{msgFromChild}}</div>
              <child :tit="msgToChild" @onfn='fn'></child>
            </div>`
        }
        let child = {
            data: function () {
                return {
                    msg: '我是子组件',
                    msgToParent:'子组件给父组件的数据'
                }
            },
            methods: {
                //通过某种方式(按需要)触发$emit给父组件传递数据
                send(){
                    this.$emit('onfn',this.msgToParent)
                }
            },
            props: ['tit'],
            template: `
                <div>
                   <p>{{msg}}</p>
                   <p>{{tit}}</p>
                   <button @click='send'>点击给父组件发送数据</button> 
                </div>`
        }      

• $parent和$children
  在子组件中可以通过this.$parent.xxx来获取到父组件的数据，并且是他的亲生父亲。如果某个组件没有父亲，那么this.$parent获取到的是它本身。
  在父组件中，可以通过this.$children来获取到它的子组件，但是和parent不同的是，通过this.$children获取到的是一个数组，包括它所有的子组件。为了准确获取到某一个子组件的数据，可以通过设置子组件属性ref,例如<child ref='num1'></child>,在父组件中通过$children.refs.num1.xxx来获取到特定的子组件的数据。
  这种方法在组件嵌套多层的时候不太适应。
• $emit和$on
  这种方式不仅适用于父子组件，还适用于其他关系的组件，保证两个接口名称相同，就可以进行数据的发送和接收

var Event = new Vue(); //准备一个空实例对象
//组件一中
Event.$emit('接口名','数据1');
//组件二中
Event.$on('接口名',function('参数'){
    //接收到数据1，进行操作
})

• 插槽
  父组件使用其他组件的时候，会用到标签的形式。例如，自定义组件com，那么在使用这个组件的时候，是这样的形式<com></com>，那么标签中间就可以放一些数据，通过在子组件中定义插槽slot来接收这些数据。

//组件com1的template
<div>
    <slot name = 's1' :msg="数据"></slot>
    <p>我是组件com1</p>
    <slot name = 's2'><slot>
</div>
//组件com2使用com1，com2的template
<div>
   <p>com2自己的一些内容</p>
   <com1>
      <template #s1="res">
          这里也可以获取子组件的数据,例如:res.msg
          插入一些数据
      </template>
      <template #s2>
          插入另一些数据
      </template>
   <com2>
</div>

需要注意的是slot的name和#对应，这种方式不仅可以传递数据，还可以传递html代码。

• vuex
  vuex是一个文件，可以在搭建vue项目时使用，用来共享数据。
  具体可以查看官方文档

本文地址：https://blog.csdn.net/weixin_42834729/article/details/107297387