VUE(uni-app框架)开发微信小程序⑥-组件

组件的简单使用

        组件（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>

最后是执行效果图：