父組件調用子組件方法

一、父組件調用子組件方法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>