diff --git a/packages/omi-cli/template/component/demo.html b/packages/omi-cli/template/component/demo.html
index dd05fcdb2..014e718ac 100644
--- a/packages/omi-cli/template/component/demo.html
+++ b/packages/omi-cli/template/component/demo.html
@@ -10,7 +10,6 @@
 </head>
 
 <body>
-  <o-counter></o-counter>
 </body>
 
 
diff --git a/packages/omi-cli/template/component/index.html b/packages/omi-cli/template/component/index.html
index ffdb84c60..ac55f7324 100644
--- a/packages/omi-cli/template/component/index.html
+++ b/packages/omi-cli/template/component/index.html
@@ -11,7 +11,8 @@
 </head>
 
 <body>
-  <o-counter></o-counter>
+  <h1>HTML Mode</h1>
+  <o-counter count="2"></o-counter>
 </body>
 
 </html>
diff --git a/packages/omi-cli/template/component/src/demo.tsx b/packages/omi-cli/template/component/src/demo.tsx
index 0de8055ce..73a3e1b44 100644
--- a/packages/omi-cli/template/component/src/demo.tsx
+++ b/packages/omi-cli/template/component/src/demo.tsx
@@ -1,16 +1,44 @@
-import { tag, WeElement, h, render } from 'omi'
+import { tag, h, WeElement, OmiProps, render } from 'omi'
 
 import './index.tsx'
 
-@tag('my-demo')
-export default class extends WeElement {
-  render(props) {
-    return <div>
-      demo
-    </div>
+export interface Attrs {
+  count?: number
+}
+
+const tagName = 'my-demo'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Attrs
+    }
   }
 }
 
+export type Props = OmiProps<Omit<Attrs, 'count'> & { count: number }>
+
+
+@tag(tagName)
+export default class MyDemo extends WeElement<Props> {
+
+  count = 2
+
+  onChanged = (evt: CustomEvent) => {
+    //同步内部状态到外部，这样防止父刷新覆盖子的 count
+    this.count = evt.detail
+  }
+
+  render(props: Props) {
+    return (
+      <div>
+        <h1 onclick={() => {
+          this.update()
+        }}>JSX Mode</h1>
+        <o-counter count={this.count} onCountChanged={this.onChanged}></o-counter>
+      </div>
+    )
+  }
+}
 
 render(<my-demo></my-demo>, 'body', {
   ignoreAttrs: true
diff --git a/packages/omi-cli/template/component/src/index.tsx b/packages/omi-cli/template/component/src/index.tsx
index 98d9a3f99..0fb53abf0 100755
--- a/packages/omi-cli/template/component/src/index.tsx
+++ b/packages/omi-cli/template/component/src/index.tsx
@@ -3,7 +3,8 @@ import { tag, h, WeElement, OmiProps } from 'omi'
 import * as css from './index.scss'
 
 export interface Attrs {
-  count?: number
+  count?: number,
+  onCountChanged?: (evt: CustomEvent) => void
 }
 
 const tagName = 'o-counter'
@@ -23,7 +24,7 @@ export default class Counter extends WeElement<Props> {
   static css = css.default ? css.default : css
 
   static defaultProps = {
-    count: 0
+    count: 1
   }
 
   static propTypes = {
@@ -31,13 +32,17 @@ export default class Counter extends WeElement<Props> {
   }
 
   minus = () => {
-    this.props.count--
-    this.update()
+    this.updateProps({
+      count: this.props.count - 1
+    })
+    this.fire('CountChanged', this.props.count)
   }
 
   plus = () => {
-    this.props.count++
-    this.update()
+    this.updateProps({
+      count: this.props.count + 1
+    })
+    this.fire('CountChanged', this.props.count)
   }
 
   render(props: Props) {
diff --git a/packages/omi-cli/template/component/tsconfig.json b/packages/omi-cli/template/component/tsconfig.json
index 6921d5d98..1ac6df2b4 100644
--- a/packages/omi-cli/template/component/tsconfig.json
+++ b/packages/omi-cli/template/component/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "module": "esnext",
-    "lib": ["es2017", "dom", "dom.iterable"],
+    "lib": [
+      "es2017",
+      "dom",
+      "dom.iterable"
+    ],
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./types",
@@ -17,6 +21,9 @@
     "jsx": "react",
     "jsxFactory": "h",
   },
-  "include": ["src/**/*.ts", "src/index.tsx"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
   "exclude": []
 }
