一、vue父组件调运component方法

在Vue中，调用组件方法通常是通过组件实例的引用来进行的。如果你需要从父组件中调用子组件的方法，可以通过ref属性来引用子组件，并通过这个引用调用子组件的方法。

以下是一个简单的例子：

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    'child-component': ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>

在这个例子中，ChildComponent 是一个子组件，它有一个方法 childMethod。父组件通过定义 ref="child" 属性来引用子组件，然后通过 this.$refs.child 访问子组件实例，并调用 childMethod 方法。

子组件 ChildComponent.vue 可能是这样的：

<template>
  <div>
    <!-- Child Component Template -->
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      // Do something
      console.log('Child method called');
    }
  }
}
</script>

在子组件中，childMethod 是你想要从父组件调用的方法。当点击按钮时，父组件的 callChildMethod 方法会被触发，进而调用子组件的 childMethod 方法。

二、vue component调运父组件方法

在Vue中，子组件可以通过事件向父组件传递参数。这是通过触发一个自定义事件并使用$emit方法来实现的。父组件可以在模板中监听这个事件，并在事件处理函数中接收传递过来的参数。

下面是一个简单的例子，展示了子组件如何给父组件传递参数：

子组件（ChildComponent.vue）：

<template>
  <div>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToParent() {
      // 假设这是子组件要传递给父组件的数据
      const data = { message: 'Hello from child' };
      
      // 使用 $emit 触发一个自定义事件，并将数据作为参数传递
      this.$emit('child-to-parent', data);
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @child-to-parent="handleDataFromChild"></child-component>
    <p>{{ receivedData }}</p>
  </div>
</template>

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

export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      receivedData: null
    };
  },
  methods: {
    handleDataFromChild(data) {
      // 从子组件接收数据
      this.receivedData = data;
    }
  }
}
</script>

在这个例子中，子组件有一个按钮，当点击按钮时，它会触发sendDataToParent方法。这个方法使用$emit来触发一个名为child-to-parent的自定义事件，并将一个包含消息的对象作为参数传递。

父组件在模板中通过@child-to-parent监听这个事件，并在handleDataFromChild方法中接收这个事件传递过来的数据。这个数据随后被保存在父组件的receivedData属性中，并在模板中展示。

这样，当子组件中的按钮被点击时，父组件就能接收到子组件传递过来的参数，并可以根据需要更新自己的状态或执行其他逻辑。