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

本文介绍了Vue.js中组件的定义、引入、注册和使用方法。通过在src/components下创建img-show.vue文件,定义了一个包含标题和图片的简单组件。接着在主模板中引入并注册该组件,最终在页面上成功展示。示例代码展示了Vue组件的基本流程,并提供了执行效果图。
摘要由CSDN通过智能技术生成

组件的简单使用

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

最后是执行效果图:

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值