tsx 整一个vue3.0组件

需求分析：

• 一个能够关闭的消息提示横幅

组件解构

• 动词：关闭 => Event.close
• 消息：消息 => Props.msg
• 横幅：类型 => Props.type

定义组件

1. 定义props.type参数类型

type messageType = 'message' | 'wraning';复制代码

1. 定义props.msg参数类型？好吧！其实就是一个string
2. 定义props

// propsconst props = {  msg: {default: "",type: String
  },  type: {default: "message",type: String as PropType<messageType>
  }
}复制代码

1. 定义组件样式

• 说明：这里类型算是比较鬼畜的，可是比较优秀的是后期不用为了类型错误发愁

// 样式const style: Record<string, Record<string, any>> = {  commStyle: {...
  },  message: {...
  },  wraning: {...
  },  close: {...
  }
}复制代码

1. 定义组件

// 定义组件
// 这个Vue方法新增了setup，其余的和之前同样
export default defineComponent({
  props: props,
  // setup有三个参数
  // void类型的this和props以及ctx
  setup(this,props, ctx) {
    // 解构props里面的msg
    const { msg } = props;
    // 定义一个响应式变量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() {
    // 合并样式
    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}>关闭</span>
      </div>
    )
  }
});复制代码

1. setup的定义

setup?: (this: void, props: Props & UnionToIntersection<ExtractOptionProp<Mixin>> 
    & UnionToIntersection<ExtractOptionProp<Extends>>,
    ctx: SetupContext<E>) => Promise<RawBindings> | RawBindings | RenderFunction | void;复制代码

1. setup函数

• 这玩意是vue3特有的
• 在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. ctx的参数

 //  ctx参数//  attrs: Proxy//  emit: (event, ...args) => instance.emit(event, ...args)//  expose: exposed => {…}//  props: Proxy//  slots: Proxy复制代码

1. 调用

<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="我是一个简单的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 /srcimport 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>复制代码