父组件调用子组件方法

一、父组件调用子组件方法vue

在Vue中，一般通过v-on来将父组件的方法绑定到子组件上，并通过$emit来触发父组件的方法。

<!-- 子组件 -->
<template>
  <button @click="$emit('custom-method')">点击触发父组件方法</button>
</template>

<!-- 父组件 -->
<template>
  <child-component @custom-method="parentMethod"></child-component>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      // 父组件方法
      console.log('点击子组件按钮，触发了父组件方法');
    }
  }
}
</script>

二、父组件调用子组件

可以通过使用$refs来调用子组件中定义的方法。需要注意的是，这种方法会涉及到父子组件之间的耦合性，并不推荐使用。

<!-- 子组件 -->
<template>
  <button @click="customMethod">子组件的方法</button>
</template>

<script>
export default {
  methods: {
    customMethod() {
      console.log('子组件的方法');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    // 调用子组件方法
    this.$refs.child.customMethod();
  }
}
</script>

三、父组件调用子组件方法修改

在父组件中修改子组件属性，可以通过以下几种方式实现：

1. 通过props来传递属性值，将子组件的属性值与父组件的data属性绑定起来，在父组件中修改即可实现子组件属性的修改。
2. 使用$refs来访问子组件的属性值，直接修改属性值即可。

四、子组件调用父组件的方法

在Vue中，可以通过$emit来触发父组件的方法，子组件需要在相应的事件中触发父组件的方法。

<!-- 子组件 -->
<template>
  <button @click="$emit('custom-event')">子组件中触发父组件的方法</button>
</template>

<!-- 父组件 -->
<template>
  <child-component @custom-event="parentMethod"></child-component>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      console.log('父组件的方法');
    }
  }
}
</script>

五、父组件调用子组件方法报错

如果父组件调用子组件方法报错，可能是因为props还没有被传递到子组件中，可以通过在mounted中使用this.$nextTick()将DOM节点渲染完后再访问子组件中的方法。

<!-- 子组件 -->
<template>
  <button @click="customMethod">子组件中的方法</button>
</template>

<script>
export default {
  methods: {
    customMethod() {
      console.log('子组件方法');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.$refs.child.customMethod();
    });
  }
}
</script>

六、父组件调用子组件方法时传不到值

如果父组件在调用子组件方法时无法将值传递给子组件，可能是因为值还没有被赋值到子组件props中，可以在父组件中使用监听器等方式来监听该值得变化，从而保证在子组件调用方法时该值已经被赋值到props中了。

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    customMethod() {
      console.log('子组件方法');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component :message="message" ref="child"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  watch: {
    message() {
      this.$nextTick(() => {
        this.$refs.child.customMethod();
      });
    }
  }
}
</script>

七、父组件调用子组件方法react

在React中，可以通过ref来获取子组件的实例对象，通过调用该实例对象中的方法来调用子组件方法。

// 子组件
class ChildComponent extends React.Component {
  customMethod() {
    console.log('子组件方法');
  }
  render() {
    return (
      <button onClick={this.props.handleClick}>点击触发父组件方法</button>
    );
  }
}

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }
  parentMethod() {
    console.log('父组件方法');
    this.childRef.current.customMethod();
  }
  render() {
    return (
      <div>
        <ChildComponent handleClick={this.parentMethod} ref={this.childRef} />
      </div>
    );
  }
}

八、父组件调用子组件方法获得回调

在父组件中调用子组件方法时，可以通过回调函数来获取子组件执行结果。

// 子组件
<template>
  <button @click="customMethod">点击触发子组件方法</button>
</template>

<script>
export default {
  methods: {
    customMethod() {
      const result = '子组件返回值';
      this.$emit('custom-event', result);
    }
  }
}
</script>

// 父组件
<template>
  <child-component @custom-event="handleCustomEvent"></child-component>
</template>

<script>
export default {
  methods: {
    handleCustomEvent(result) {
      console.log(result); // 子组件返回值
    }
  }
}
</script>

九、父组件调用子组件方法返回的值

在父组件中调用子组件方法时，可以通过返回值来获取子组件执行结果。

// 子组件
<template>
  <button @click="customMethod">点击触发子组件方法</button>
</template>

<script>
export default {
  methods: {
    customMethod() {
      const result = '子组件返回值';
      return result;
    }
  }
}
</script>

// 父组件
<template>
  <child-component ref="child"></child-component>
</template>

<script>
export default {
  methods: {
    parentMethod() {
      const result = this.$refs.child.customMethod();
      console.log(result); // 子组件返回值
    }
  }
}
</script>

十、父组件调用子组件方法除了ref选取

除了使用ref来获取子组件实例对象之外，还可以通过$children来获取所有子组件实例，从而在父组件中调用子组件方法。

<!-- 父组件 -->
<template>
  <div>
    <button @click="clickChild">点击子组件的按钮</button>
    <child-component1></child-component1>
    <child-component2></child-component2>
    <child-component3></child-component3>
  </div>
</template>

<script>
export default {
  methods: {
    clickChild() {
      this.$children.forEach(child => {
        child.customMethod();
      });
    }
  }
}
</script>