mirror of
https://github.com/lainbo/component-party.git
synced 2026-04-05 13:09:03 +08:00
feat(qwik): add component-composition/emit-to-parent (#114)
* fix(qwik): typescript eslint parser * feat(qwik): add answer button example
This commit is contained in:
@@ -0,0 +1,18 @@
|
||||
import { component$, PropFunction } from '@builder.io/qwik';
|
||||
|
||||
type Props = {
|
||||
onYes$: PropFunction<() => void>;
|
||||
onNo$: PropFunction<() => void>;
|
||||
};
|
||||
|
||||
const AnswerButton = component$((props: Props) => {
|
||||
return (
|
||||
<>
|
||||
<button onClick$={props.onYes$}>YES</button>
|
||||
|
||||
<button onClick$={props.onNo$}>NO</button>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default AnswerButton;
|
||||
@@ -0,0 +1,26 @@
|
||||
import { $, component$, useStore } from '@builder.io/qwik';
|
||||
import AnswerButton from './AnswerButton';
|
||||
|
||||
const App = component$(() => {
|
||||
const store = useStore({
|
||||
canCome: true,
|
||||
});
|
||||
|
||||
const onAnswerNo = $(() => {
|
||||
store.canCome = false;
|
||||
});
|
||||
|
||||
const onAnswerYes = $(() => {
|
||||
store.canCome = true;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>Can I come ?</p>
|
||||
<AnswerButton onYes$={onAnswerYes} onNo$={onAnswerNo} />
|
||||
<p style={{ fontSize: 50 }}>{store.canCome ? '😀' : '😥'}</p>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default App;
|
||||
Reference in New Issue
Block a user