weex 04 自定义组件和Text组件

自定义一个通用header组件，该header里包含一个text组件。这样其他模块在使用header时直接导入注册引用即可。

自定义组件

1. 新建 top_header.vue 文件

2. 在 top_header.vue 中完成如下代码

   <template>
       <div class="topheader">
       <text>this is custom top header</text>
       </div>
   </template>
   
   <script>
   export default {}
   </script>
   
   <style scoped>
       .topheader{
           background-color: red;
           padding: 10px;
       }
   </style>
   

   • template 标签中放置需要的组件并设置相关样式，需要注意的是该标签中的最外层标签只能是 div 标签
   • script 标签是放置脚本
   • style 标签完成样式，对于样式的使用，必须使用类名或者ID进行设置

引用自定义组件

1. 在index.vue 中的 script 标签里导入自定义组件

   import topHeader from './top_header.vue'

2. 在 components 完成 导入组件的注册

   components: {
       topHeader
   }

3. 在 index.vue中模版里 使用自定义的组件

   <template>
   <div class="wrapper">
   <topHeader></topHeader>
   <text class="greeting">The environment is ready!</text>
   <router-view/>
   </div>
   </template>

4. 完整代码如下

   <template>
     <div class="wrapper">
       <topHeader></topHeader>
       <text class="greeting">The environment is ready!</text>
       <router-view/>
     </div>
   </template>
   
   <script>
   import topHeader from './top_header.vue'
   export default {
     name: 'App',
     data () {
       return {
         logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
       }
     },
     components: {
       topHeader
     }
   }
   </script>
   
   <style scoped>
     .wrapper {
       justify-content: center;
       align-items: center;
     }
     .logo {
       width: 424px;
       height: 200px;
     }
     .greeting {
       text-align: center;
       margin-top: 70px;
       font-size: 50px;
       color: #41B883;
     }
     .message {
       margin: 30px;
       font-size: 32px;
       color: #727272;
     }
   </style>
   

效果预览

web端

1. 在编写 vue代码时 如果开启了 npm run serve 和npm run dev ，进行保存操作，就会自动编译同时web刷新

android 端

1. 同样的操作，如果此时开启了 npm run serve 和npm run dev ，进行保存操作后会自动编译，生成对应的js文件
2. 在android studio上直接 run 就可以看到效果了