The TSX is a vue3.0 component

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

2. Define the props. MSG parameter type? All right! It’s really just astring
3. Define the props

// props
const props = {
  msg: {
    default: "".type: String
  },
  type: {
    default: "message".type: String as PropType<messageType>
  }
}
Copy the code

4. 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

5. 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

6. 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

7. The setup function

• This thing is unique to vue3
• You can use the following lifecycle hook functions in Setup

8. 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

9. 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