在主组件, 左边子组件调用右边子组件方法

定义主组件

<template>
    <ColumnLeft @callChildColumnRight="callChildColumnRightMethod"></ColumnLeft>
    <ColumnRight ref="ColumnRight"></ColumnRight>
</template>
<script>
import ColumnLeft from '@/components/fusure/column/ColumnLeft.vue'; // 导入子组件
import ColumnRight from '@/components/fusure/column/ColumnRight.vue'; // 导入子组件
export default {
    components: {        
        publicMenu,
        ColumnLeft,
        ColumnRight,
    methods:{
      callChildColumnRightMethod(){
        this.$refs.ColumnRight.loadCategories();
</script>

左组件直接调用，注意对应名就行

this.$emit("callChildColumnRight");

主组件给子组件传递参数的方法

父组件中使用子组件并传递参数：

<template>
    <!-- 使用子组件，并通过props属性传递参数 -->
    <child-component :message="parentMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  data() {
    return {
      parentMessage: '这是从父组件传递给子组件的消息'
</script>

子组件的定义（ChildComponent.vue）：

<template>
    <p>{{ message }}</p>
</template>
<script>
export default {
  props: {
    message: String // 定义一个名为message的props，类型为String
</script>

在上面的代码中，我们首先导入了子组件ChildComponent，然后在父组件的模板中使用了子组件，并通过:message来传递数据给子组件。parentMessage是父组件中的数据，通过props属性传递给子组件的message属性。

这样，子组件就可以在自己的模板中访问message属性，并显示父组件传递过来的数据。

主组件传递多个参数给子组件

在主组件中：

<template>
    <!-- 使用子组件，并传递两个参数 -->
    <child-component :data="childData"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  data() {
    return {
      // 将要传递给子组件的两个参数打包成一个对象
      childData: {
        clickCategory: this.clickCategory,
        clickCategoryToHide: this.clickCategoryToHide
</script>

在子组件中：

<template>
    <!-- 子组件中使用 data 属性接收参数 -->
    <div @click="handleClick(data.clickCategory, data.clickCategoryToHide)">
      Click me
</template>
<script>
export default {
  props: {
    // 子组件通过 props 接收参数
    data: {
      type: Object, // 参数类型为对象
      required: true // 参数必须传递
  methods: {
    handleClick(clickCategory, clickCategoryToHide) {
      // 在子组件中访问传递的参数
      console.log('Received clickCategory:', clickCategory);
      console.log('Received clickCategoryToHide:', clickCategoryToHide);
</script>

子组件传递参数给主组件

在主组件中监听自定义事件

<template>
    <!-- 使用子组件，并监听自定义事件 -->
    <child-component @childEvent="handleChildData"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  methods: {
    // 处理从子组件传递的数据
    handleChildData(data) {
      // 在这里处理传递回来的数据
      console.log('Received data from child component:', data);
</script>

子组件的定义（ChildComponent.vue）：

// 子组件中
<button @click="sendDataToParent">发送数据到主组件</button>
methods: {
  sendDataToParent() {
    // 通过 $emit 触发一个自定义事件，并传递数据
    this.$emit('childEvent', this.dataToSend);