Demand analysis:

  • A message alert banner that can be closed

Component deconstruction

  • Verb: close => event.close
  • Message: Message => Props. MSG
  • Banner: Type => Props. Type

Define the components

  1. Define the props. Type parameter type
type messageType = 'message' | 'wraning';
Copy the code
  1. Define the props. MSG parameter type? All right! It’s really just astring
  2. Define the props
// props
const props = {
  msg: {
    default: "".type: String
  },
  type: {
    default: "message".type: String as PropType<messageType>
  }
}
Copy the code
  1. Defining component styles
  • Note: here type is more ghost livestock, but more excellent is not to worry about type error later
/ / style
const style: Record<string, Record<string.any> > = {commStyle: {...
  },
  message: {...
  },
  wraning: {...
  },
  close: {... }}Copy the code
  1. Define the components
// Define the component
// This Vue method adds setup, otherwise the same as before
export default defineComponent({
  props: props,
  // Setup takes three arguments
  // This and props of void and CTX
  setup(this,props, ctx) {
    // decompose the MSG inside props
    const { msg } = props;
    // Define a response variable message
    const message: Ref<string> = ref(msg);

    const close = () = > {
      // ctx => object
      console.log(ctx);
      // this => undefined
      console.log(this);
      // emit
      ctx.emit("close",ctx)
    }

    return { message, close };
  },
  // render
  render() {
    // Merge styles
    const currentStyle: Record<string.string> = {... style.commStyle, ... style[this.type]
    }
    // jsx
    return (
      <div style={currentStyle}>
        <span>{this.message}</span>
        <span style={style.close} onClick={this.close}>Shut down</span>
      </div>)}});Copy the code
  1. The definition of the setup
setup? :(this: void, props: Props & UnionToIntersection<ExtractOptionProp<Mixin>> 
    & UnionToIntersection<ExtractOptionProp<Extends>>,
    ctx: SetupContext<E>) = > Promise<RawBindings> | RawBindings | RenderFunction | void;
Copy the code
  1. The setup function
  • This thing is unique to vue3
  • You can use the following lifecycle hook functions in Setup
Options API Hook inside setup
beforeCreate Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered
  1. The parameters of the CTX
 
/ / CTX parameter
// attrs: Proxy
// emit: (event, ... args) => instance.emit(event, ... args)
// expose: exposed => {... }
// props: Proxy
// slots: Proxy
Copy the code
  1. call
<template>
  <div class="home">
    <img alt="Vue logo" src=".. /assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
    <TestComm type="wraning" msg="I'm a simple message." @close="closeEvent" />
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import TestComm from "./test";
import { SetupContext } from "vue";

@Options({
  components: {
    HelloWorld,
    TestComm,
  },
})
export default class Home extends Vue {
  public closeEvent(args: SetupContext) {
    console.log(args); }}</script>

Copy the code