您可以使用key重新加载使用key的子组件

<component :is="child1" :filter="filter" :key="componentKey"></component>

如果要重新加载带有新过滤器的组件，如果按钮单击过滤子组件

reloadData() {            
   this.filter = ['filter1','filter2']
   this.componentKey += 1;  
},

并使用过滤器来触发该函数

如果你有时间，使用Vuex存储来观察变量(即状态)或直接触发(即分派)一个动作。

Vue 3组合API

为子组件创建一个ref，在模板中赋值它，并使用<ref>. ref。值直接调用子组件。

<script setup>
import {ref} from 'vue';

const childComponentRef = ref(null);

function click() {
  // `childComponentRef.value` accesses the component instance
  childComponentRef.value.doSomething(2.0);
}
</script>

<template>
  <div>
    <child-component ref="childComponentRef" />
    <button @click="click">Click me</button>
  </div>
</template>

有几件事需要注意

如果你的子组件使用<script setup>，你需要使用defineExpose声明公共方法(例如上面的doSomething)。 如果你使用的是Typescript，详细的注释方法在这里。

Vue 3 Options API / Vue 2

给子组件一个ref，并使用$refs直接调用子组件上的方法。

html:

<div id="app">
  <child-component ref="childComponent"></child-component>
  <button @click="click">Click</button>  
</div>

javascript:

var ChildComponent = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  }
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  },
  methods: {
    click: function() {
        this.$refs.childComponent.setValue(2.0);
    }
  }
})

有关更多信息，请参阅Vue 3文档中的组件参考或Vue 2文档中的参考。

您可以通过切换父节点中的布尔道具来模拟向子节点发送事件。

父代码:

...
<child :event="event">
...
export default {
  data() {
    event: false
  },
  methods: {
    simulateEmitEventToChild() {
      this.event = !this.event;
    },
    handleExample() {
      this.simulateEmitEventToChild();
    }
  } 
}

子代码:

export default {
  props: {
    event: {
      type: Boolean
    }
  },
  watch: {
    event: function(value) {
      console.log("parent event");
    }
  }
}

您可以使用$emit和$on。使用@RoyJ代码:

html:

<div id="app">
  <my-component></my-component>
  <button @click="click">Click</button>  
</div>

javascript:

var Child = {
  template: '<div>{{value}}</div>',
  data: function () {
    return {
      value: 0
    };
  },
  methods: {
    setValue: function(value) {
        this.value = value;
    }
  },
  created: function() {
    this.$parent.$on('update', this.setValue);
  }
}

new Vue({
  el: '#app',
  components: {
    'my-component': Child
  },
  methods: {
    click: function() {
        this.$emit('update', 7);
    }
  }
})

运行示例:https://jsfiddle.net/rjurado/m2spy60r/1/

我认为我们应该考虑父母使用孩子的方法的必要性。实际上，父组件不需要关心子组件的方法，而可以将子组件视为FSA(有限状态机)。父组件来控制子组件的状态。因此，观察状态变化或仅使用计算功能就足够了