关于vue.js:通过vue3学习react17二-父组件调用子组件方法Refts

明天次要学习 ref 办法去调用子组件的办法, react hook 和 vue 单文件都应用到

喜爱的能够点赞

React

useRef 仅能用在 FunctionComponent，createRef 仅能用在 ClassComponent。

应用 useRef

子组件 (Child.tsx)

# Child.tsx
export interface ChildProps {
  count: number;
  setCount: (params: ChildProps["count"]) => void;
}

const Child = (_props: any, ref: any) => {let [count, setCount] = useState(0);
  useImperativeHandle(ref, () => ({
    count,
    setCount,
  }));
  return (
    <div>
      <p>{count}</p>
    </div>
  );
};
export default Child;
# or
export interface ChildProps {
  count: number;
  setCount: (params: ChildProps["count"]) => void;
}

interface refInterface {cRef: React.MutableRefObject<ChildProps | undefined>;}

const Child: React.FC<refInterface> = (props) => {const { cRef} = props;
  let [count, setCount] = useState(0);
  useImperativeHandle(cRef, () => ({
    count,
    setCount,
  }));
  return (
    <div>
      <p>{count}</p>
    </div>
  );
};

export default Child;

父组件 (Parent.tsx)

# Parent.tsx
function Parent() {const childRef = useRef<ChildProps>();
  const updateChildState = () => {
    // changeVal 就是子组件裸露给父组件的办法
    childRef.current?.setCount(childRef.current?.count + 1);
  };
  return (
    <div>
      <Child ref={childRef}></Child>
      <button onClick={updateChildState}> 按钮 </button>
    </div>
  );
}

createRef

子组件 (Child.tsx)

import React, {useState} from "react";
interface ChildInterface {count: number;}

class Child extends React.Component<unknown, ChildInterface> {constructor(props: React.FC) {super(props);
    this.state = {count: 0,};
  }
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
      </div>
    );
  }

  setCount = (params: number) => {
    this.setState({count: params,});
  };
}

export default Child;

父组件 (Parent.tsx)

import Child from "./Child";

class Parent extends React.Component {
  childRef: RefObject<Child>;
  // childRef: LegacyRef<Child> | undefined;
  constructor(props: React.FC) {super(props);
    this.childRef = createRef();}

  render() {
    return (
      <div>
        <Child ref={this.childRef}></Child>
        <button onClick={this.updateChildCount}> 按钮 </button>
      </div>
    );
  }
  updateChildCount = () => {let { setCount, state} = this.childRef.current as Child;
    setCount(state.count + 1);
  };
}

export default Parent;

Vue3

父组件兼容二个写法

父组件 (Parent.vue)

# Parent.vue
<template>
  <Child ref="childRef"></Child>
  <button @click="onClick"> 按钮 </button>
</template>

<script setup lang="ts">
import {ref} from "vue";
import Child from "./Child.vue";

const childRef = ref<InstanceType<typeof Child>>();
const onClick = () => {console.log(childRef.value);
  childRef.value?.setCount(childRef.value?.count + 1);
  childRef.value?.setCount2(childRef.value?.count2 + 1);
};
</script>

惯例写法

子组件 (Child.vue)

# Child.vue
<template>
  <div>
    <p>count: {{count}}</p>
    <p>count2: {{count2}}</p>
  </div>
</template>

<script lang="ts">
import {ref, defineComponent, Ref} from "vue";

export default defineComponent({data() {
    return {count2: 2,};
  },
  methods: {setCount2(param: number) {this.count2 = param;},
  },
  setup() {let count = ref(0);
    function setCount(param: number) {count.value = param;}
    return {
      count,
      setCount,
    };
  },
});
</script>

单文件写法 (setup)

<template>
  <div>
    <p>{{count}}</p>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const count = ref(0);
function setCount(param: number) {count.value = param;}

defineExpose({
  count,
  setCount,
});
</script>

<style scoped></style>