为什么定义事件用<mx:Metadata> 标签

本文对比了在Flex中使用&lt;mx:Metadata&gt;定义事件与通过继承方式定义事件的区别。前者允许直接在组件中调用事件,而后者需要手动添加事件监听器。文章还介绍了如何使用&lt;mx:Metadata&gt;简化事件处理。
定义方法方式:
<mx:Metadata>
[Event(name="dataShare",type="flash.events.TextEvent")]
</mx:Metadata>
与定义enableChange1 extends Event 有什么区别啊?

用<mx:Metadata> 方式 声明后 ,在组件中 可以直接调用事件,用继承方式实现的事件,必须加监听事件。

/* private function init():void{
this.addEventListener("dataShare",enableChangeHandler);
}

private function enableChangeHandler(event:Event):void{
Alert.show(event.type);
} */

加了 <mx:Metadata>后 可以在组件直接用
<local:btn id="xx" dataShare="dataShareHandler(event)"/>
相当于加了监听,所以说加了<mx:Metadata>后更简练

参考 http://www.flashas.net/flex/20090910/4505.html
"use client"; import { useState, useEffect } from "react"; import { useTheme } from "next-themes"; import { Moon, SunMoon } from "lucide-react"; const ThemeSwitch = () => { const [mounted, setMounted] = useState(false); const { theme, setTheme } = useTheme(); // useEffect only runs on the client, so now we can safely show the UI useEffect(() => { setMounted(true); }, []); if (!mounted) { return null; } return ( <div onClick={() => { setTheme(theme === "light" ? "dark" : "light"); }} > {theme === "light" ? <Moon size={15} /> : <SunMoon size={15} />} </div> ); }; export default ThemeSwitch; import Link from 'next/link'; import HeaderAuth from './header-auth'; import SearchInput from './search-input'; import { Navbar, NavbarBrand, NavbarContent, NavbarItem, Input, } from "@heroui/react"; import ThemeSwitch from './theme-switch'; export const AcmeLogo = () => { return ( <svg fill="none" height="36" viewBox="0 0 32 32" width="36"> <path clipRule="evenodd" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" fill="currentColor" fillRule="evenodd" /> </svg> ); }; export default async function Header() { return ( <Navbar className="border-b-1 border-gray-300"> <NavbarBrand> <Link href={'/'} className='flex items-center ml-[-10px]'> <AcmeLogo /> <p className="font-bold text-inherit">DISCUSS</p></Link> </NavbarBrand> <NavbarContent className="hidden sm:flex gap-4" justify="center"> <NavbarItem> <SearchInput /> </NavbarItem> </NavbarContent> <NavbarContent justify="end"> <ThemeSwitch /> <HeaderAuth /> </NavbarContent> </Navbar> ); } import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import { Providers } from "./providers"; import Header from "../components/header"; const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"], }); const geistMono = Geist_Mono({ variable: "--font-geist-mono", subsets: ["latin"], }); export const metadata: Metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en" suppressHydrationWarning={true}> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > <Providers> <Header /> <div className="max-w-[1024px] px-6 mt-5 mx-auto">{children}</div> </Providers> </body> </html> ); } // app/providers.tsx "use client"; import { HeroUIProvider } from "@heroui/react"; import { SessionProvider } from "next-auth/react"; import { ThemeProvider } from "next-themes"; export function Providers({ children }: { children: React.ReactNode }) { return ( <SessionProvider> <ThemeProvider enableColorScheme={false}> <HeroUIProvider>{children}</HeroUIProvider> </ThemeProvider> </SessionProvider> ); } @import "tailwindcss"; @plugin '../../hero.ts'; /* Note: You may need to change the path to fit your project structure */ @source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}'; @custom-variant dark (&:is(.dark *));为什么我点击图标后,页面样式不转变,检查发现html标签中data-theme="dark"可以根据点击该百年
最新发布
08-31
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值