首页> 基础笔记 >Vue学习笔记 Vue学习笔记

vue组件的定义及使用

作者：小萝卜 2024-03-11 【 Vue 】浏览 72

简介当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

定义一个组件

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

<!--组件必须包含template-->
<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style>

</style>

使用组件

第一步：import引入组件

第二部：注册组件

第三步使用组件

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text :class="title">{{title}}</text>
		</view>
		<p v-on:click="count++">{{count}}</p>
		<p @click="addCount">{{count}}</p>
	</view>
	<formDemo></formDemo>
	<domDemo></domDemo>
</template>

<script>
	import formDemo from "./formDemo.vue"
	import domDemo from "./domDemo.vue"
	export default {
		data() {
			return {
				title: 'Hello',
				count:0,
				
			}
		},
		onLoad() {

		},
		methods: {
			addCount(){
				this.count++
			}
		},
		components: {
		    // 局部注册组件
			formDemo,
			domDemo
		  }
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

</style>

很赞哦！ (0)

上一篇：vue组件的注册方式