vue3.0 子组件调用父组件的方法

vue3.0 子组件调用父组件的方法

方法 1

父组件

<div>
  <register @update:changeDisplayValue="changeDisplayValue"></register>
</div>

setup(){
  let changeDisplayValue = value => {
    console.log(value);
    loginData.displayValue = value;
  };
  return {
    changeDisplayValue
  };
}

子组件

<template>
  <div class="register">
    <h3>注册</h3>
    <span @click="toLogin">去登录</span>
  </div>
</template>

<script>
export default {
  setup(props, context) {
    let toLogin = () => {
      context.emit("update:changeDisplayValue", "login");
    };
    return {
      toLogin
    };
  }
};
</script>

方法 2

父组件

<div>
  <register @changeDisplayValue="changeDisplayValue"></register>
</div>

子组件

import { getcurrentInstance} from vue;
<script>
export default {
  setup(props, context) {
  const internalInstance = getCurrentInstance();
  let toLogin = () => {
    internalInstance.emit("changeDisplayValue", "login");
    // 可用json对象的方式，传多个参数
    //internalInstance.emit("changeDisplayValue", {a:'1',b:'2'});
  };
  return {
    toLogin
  };
};
</script>