Vue中，一个组件调用其他组件的方法（非父子组件）

Posted 2023-03-29 viceen

Vue中，一个组件调用其他组件的方法（非父子组件）

场景——B页面（组件）想调用 A页面(组件)中的方法；但是两个页面（组件）毫无关联（刷新 A的数据）。

方式一：引用式

1、当前组件引入将要调用方法所属的组件

这里我的当前组件要调用OrderDetail这个组件的check()方法

import Detail from "./detail.vue";

该方法定义在OrderDetail的methods属性中

2、当前组件通过该组件methods属性直接调用该方法

// 也可以调用 created、data等
Detail.methods.check();

方式二：vuex

• 使用 VueX 定义一个属性 ，然后在A页面 定义一个计算属性（computed） 再把 vuex 的属性返回给它，
  再监听这个计算属性，发生变化就调用你要执行的方法。

1、src/store/index.js

//  Vuex   全局
state:  
	tableStatus:false  
	 	
 mutations:  
	changeStatus(state,status)   //  重复赋值
      state.tableStatus = status;
    ,

2、被使用组件- A 页面（组件）

 //  A 页面（组件）
computed:   
  status()   //  计算属性
    return this.$store.state.tableStatus; //  Vuex 中定义的属性
  
,
watch:
  status() 
    this.getTableList();  //   需要调用的方法
  
,

3、使用触发页面-B 页面（组件）

然后就是在B 页面定义一个点击事件（举例），重新给 Vuex中的属性赋值就行了

//  B页面（组件）
closePage() 
    let status = this.$store.state.tableStatus;   // 重新赋值
    this.$store.commit("changeStatus", !status);
,

方式三：使用事件总线eventBus定义全局事件

1、src/main.js

 window.eventBus = new Vue();

2、触发页面-B组件/发布事件

window.eventBus.$emit('setFeaturesData', data)  // 带参数
window.eventBus.$emit('setFeaturesData')  // 不带参数

3、接收页面-A组件/订阅事件

    window.eventBus.$on('setFeaturesData', (data)=> // 带参数
      this.hoveredFeatures = [data]
      this.onClick()
    )

  mounted() 
    this.getTableData()
    window.eventBus.$on('setFeaturesData', ()=> // 不带参数
      this.getTableData()
    )
  ,

4、移除事件

window.eventBus.$off('setFeaturesData')

vue父子组件之间的通信

参考技术A 概述

每一个.vue 文件就是一个 组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中， 在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。

在vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中，import Hello from './components/Hello'，那么App.vue 就是父组件，components 文件夹下的Hello.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。

父------子

父组件向子组件传值, 它主要是通过元素的属性进行的. 在App.vue 的template中,有一个, 这就是我们引入的子组件.  给其添加属性如mes-father="message from father";  父组件将数据传递进去,子组件需要接收才能使用. 怎样接收呢?

在Hello.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应. 

注意： 在父组件,就是在 元素中定义的属性是mes-father， 没有一一对应啊?  这主要是因为，在html 元素中大小写是不敏感的。 如果我们写成， 里面的mesFather  就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据， 如果在js 文件中，我们定义props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的， 只能写成props: ["mesfather"].  但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一个转化，如果在组件中属性是- 表示，它 自动会转化成驼峰式。传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。props 属性是和data，methods 属性并列的，属同一级别。props 属性里面定义的变量，在 子组件中的template 中可以直接使用。

App.vue文件：

Hello.vue文件：

这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。

子------父

子组件向父组件传递数据，需要用到自定义事件。 例如，我们在Hello.vue，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。

在Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter

Hello.vue文件：

在App.vue 中，template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据childMes </p>

相应地，在scrpit中，data 中，定义一个变量childMes, 并在methods 中，定义一个事件处理函数reciever。

App.vue文件：

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。 

当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter， 在enter 中， 我们发射了一个事件valueUp， 并携带了一个参数，由于在<hello @valueUp=”recieve”></hello> 组件中， 我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件， 当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。

谢谢！结束！