update omi example & update tutorial

packages/omi/examples/vue/app.vue

@@ -3,40 +3,35 @@ import { define, WeElement, html } from 'omi'
 
 define('my-ele', class extends WeElement {
   static propTypes = {
-    name: String
+    name: String,
+    user: Object
   }
 
   clickHandle = ()=>{
-   
-   this.fire('myEvent', true)
-
+    this.fire('myEvent', 'abc')
   }
 
   render(props) {
     return (
-      html`<div onClick=${this.clickHandle}>Hello, ${props.name}! </div>`
+      html`<div onClick=${this.clickHandle}>Hello, ${props.name}! ${props.user.name} ${props.user.age}! </div>
+      `
     )
   }
 })
 
-
 export default {
-  data: function() {
-    return {
-      result: false
-    }
+  created(){
+    Omi.$.user = { name:'Omi' ,age: 1 }
   },
   methods: {
     myEvent: function(evt) {
+      //output abc
       console.log(evt.detail)
     }
   }
 }
 </script>
 
-
 <template>
-  <div>
-    <my-ele name="Omi" @myEvent="myEvent" />
-  </div>
+  <my-ele name="Omi" user=":user" @myEvent="myEvent" />
 </template>

tutorial/pass-complex-type-props-to-custom-elements.cn.md

@@ -124,6 +124,75 @@ define('my-element', class extends WeElement {
 
 这里可以看到，omi 内部还会对 josn 格式进行处理，防止 `JSON.parse` 出错。当然 eval 和 new Function 可以转化错误格式的 json 字符串，但是考虑到安全性，还是使用`JSON.parse` 。
 
+## 实战
+
+定义自定义元素:
+
+```jsx
+import { define, WeElement } from 'omi'
+
+define('my-ele', class extends WeElement {
+  static propTypes = {
+    name: String
+  }
+
+  clickHandle = ()=>{
+    this.fire('myEvent', 'abc')
+  }
+
+  render(props) {
+    return (
+      <div onClick={this.clickHandle}>{props.name} {props.user.name} {props.user.age} </div>
+    )
+  }
+})
+```
+
+### 在 Vue 中使用
+
+
+```html
+<script>
+export default {
+  created(){
+    Omi.$.user = { name:'Omi' ,age: 1 }
+  },
+  methods: {
+    myEvent: function(evt) {
+      //output abc
+      console.log(evt.detail)
+    }
+  }
+}
+</script>
+
+<template>
+  <my-ele name="Omi" user=":user" @myEvent="myEvent" />
+</template>
+```
+
+
+### 在 Preact 中使用
+
+
+```html
+<script>
+export default {
+  methods: {
+    myEvent: function(evt) {
+      //output abc
+      console.log(evt.detail)
+    }
+  }
+}
+</script>
+
+<template>
+  <my-ele name="Omi" @myEvent="myEvent" />
+</template>
+```
+
+
 ## 最后
 
 Omi 对 attrs 和 props 进行了全映射， attr 就是 props，在任意框架中都可以使用同样的方式使用 omi 定义的自定义元素。如果你有什么意见建议[欢迎让我知道](https://github.com/Tencent/omi/issues/new)。