weex 04 自定义组件和Text组件

最新推荐文章于 2021-06-25 09:11:54 发布

泥瓦酱

最新推荐文章于 2021-06-25 09:11:54 发布

阅读量1.7k

点赞数

文章标签： weex android

本文链接：https://blog.csdn.net/lucky9322/article/details/82144342

版权

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

自定义组件

新建 top_header.vue 文件

在 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进行设置

这里写图片描述

引用自定义组件

在index.vue 中的 script 标签里导入自定义组件
```
import topHeader from './top_header.vue'
```
在 components 完成导入组件的注册
```
components: {
    topHeader
}
```

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

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

完整代码如下

<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>