组件的简单使用
组件(component)是vue.js最强大的功能之一。组件的作用就是封装可重用的代码,通常一个组件就是一个功能体,便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件,而且是所有组件的根组件
1 .组件定义
在src下面定义文件夹为components,然后在它下面定义组件文件img-show.vue
在该组件中添加以下代码,就实现了定义一个简单的组件:
<template>
<div>
<h1 style="text-align:center;background-color:antiquewhite;font-size: 5ch;">汪汪汪</h1>
<image src="/static/g1.png" />
</div>
</template>
<style></style>
2 .组件的引入
//2.引入组件
import imgShow from "@/components/img-show";
3 .组件的注册
//3.注册组件
components:{
imgShow
}
4 .组件的使用
<!--4.使用组件-->
<imgShow></imgShow>
贴一下完整代码:
<template>
<view class="content">
<!--4.使用组件-->
<imgShow></imgShow>
</view>
</template>
<script>
//2.引入组件
import imgShow from "@/components/img-show";
export default {
//3.注册组件
components:{
imgShow
}
}
</script>
最后是执行效果图: