如何在Ember.js中通过父组件事件调用子组件的action

嘿，我懂你现在的困扰——sendAction本来就是设计用来让子组件向父组件传递动作的，反向调用肯定不生效！给你几个实用的解决方案，根据你使用的前端框架来选就好：

方法一：直接使用组件引用（Refs） #

这是最直接的方式，父组件通过引用获取子组件实例，然后直接调用子组件的方法。

React 示例 #

父组件代码：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 创建子组件引用
    this.childRef = React.createRef();
  }

  // 父组件的触发事件
  handleParentEvent = () => {
    // 调用子组件的action方法
    this.childRef.current.childAction();
  };

  render() {
    return (
      <div>
        <button onClick={this.handleParentEvent}>触发子组件动作</button>
        {/* 绑定引用到子组件 */}
        <ChildComponent ref={this.childRef} />
      </div>
    );
  }
}

子组件代码：

class ChildComponent extends React.Component {
  // 子组件的action方法
  childAction = () => {
    console.log("子组件的Action被触发啦！");
    // 这里写子组件要执行的业务逻辑
  };

  render() {
    return <div>我是子组件</div>;
  }
}

Vue 示例 #

父组件代码：

<template>
  <div>
    <button @click="triggerChildAction">触发子组件动作</button>
    <!-- 绑定引用到子组件 -->
    <ChildComponent ref="childRef" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    triggerChildAction() {
      // 通过引用调用子组件方法
      this.$refs.childRef.childAction();
    }
  }
}
</script>

子组件代码：

<template>
  <div>我是子组件</div>
</template>

<script>
export default {
  methods: {
    childAction() {
      console.log("子组件的Action被触发啦！");
    }
  }
}
</script>

方法二：通过Props传递状态（更符合单向数据流） #

如果不想直接操作子组件实例，这种方法更符合前端框架的单向数据流理念：父组件通过props传递一个状态值，子组件监听这个状态的变化，当状态改变时执行对应的Action。

React 示例 #

父组件代码：

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      triggerChild: false
    };
  }

  handleParentEvent = () => {
    // 切换状态，触发子组件的监听
    this.setState(prevState => ({ triggerChild: !prevState.triggerChild }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleParentEvent}>触发子组件动作</button>
        {/* 传递触发状态给子组件 */}
        <ChildComponent trigger={this.state.triggerChild} />
      </div>
    );
  }
}

子组件代码：

class ChildComponent extends React.Component {
  // 监听props变化
  componentDidUpdate(prevProps) {
    if (prevProps.trigger !== this.props.trigger) {
      this.childAction();
    }
  }

  childAction = () => {
    console.log("子组件的Action被触发啦！");
  };

  render() {
    return <div>我是子组件</div>;
  }
}

Vue 示例 #

父组件代码：

<template>
  <div>
    <button @click="triggerChild = !triggerChild">触发子组件动作</button>
    <!-- 传递触发状态给子组件 -->
    <ChildComponent :trigger="triggerChild" @reset-trigger="triggerChild = false" />
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      triggerChild: false
    }
  }
}
</script>

子组件代码：

<template>
  <div>我是子组件</div>
</template>

<script>
export default {
  props: ['trigger'],
  // 监听props变化
  watch: {
    trigger(newVal) {
      if (newVal) {
        this.childAction();
        // 可选：通知父组件重置状态，避免重复触发
        this.$emit('reset-trigger');
      }
    }
  },
  methods: {
    childAction() {
      console.log("子组件的Action被触发啦！");
    }
  }
}
</script>

为什么sendAction没用？ #

再补充一句：sendAction（常见于Ember等框架）的设计初衷就是子组件向上派发动作，让父组件响应处理，所以它本身不支持父组件调用子组件的方法，换用上面的方法就可以解决啦！

内容的提问来源于stack exchange，提问作者Sanjay