前端vue学习曲线（13）组件

最新推荐文章于 2025-05-23 10:13:21 发布

原创最新推荐文章于 2025-05-23 10:13:21 发布 · 413 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了在Vue中如何定义和使用组件，强调了data选项必须为函数这一关键点，并通过实例演示了prop如何用于父组件向子组件传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义组件

// 定义一个名为 button-counter 的新组件
	Vue.component("button-counter", {
		data() {
			return {
				count: 0
			}
		},
		template: '<button @click="count++">You clicked me {{ count }} times.</button>'
	})

2.使用

<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
<p>注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。</p>

注意：

一个组件的 data 选项必须是一个函数
先定义组件，然后在创建vue对象

3.prop传数据

<blog-post title="props1"></blog-post>

Vue.component("blog-post", {
		props: ['title'],
		template: '<h3>{{title}}</h3>'
})

例子：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

	</head>

	<body>
		<div id="app1">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
			<p>注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。</p>
			<h3>1.一个组件的 data 选项必须是一个函数</h3>

			<p>#prop传数据</p>
			<blog-post title="props1"></blog-post>
			<blog-post title="props2"></blog-post>

			<p>单个根元素</p>

			<blog-post1 
				v-for="post in posts" 
				v-bind:key="post.id" 
				v-bind:post="post">
			</blog-post1>
			
			
			<p>监听子组件事件</p>
			<div
				:style="{fontSize:postFontSize+'em'}">
				<blog-post2
					v-for="post in posts"
					:key="post.id"
					:post="post"
					@enlarge-text="postFontSize += $event"
				></blog-post2>
			</div>
		</div>
	</body>

</html>
<script>
	// 定义一个名为 button-counter 的新组件
	Vue.component("button-counter", {
		data() {
			return {
				count: 0
			}
		},
		template: '<button @click="count++">You clicked me {{ count }} times.</button>'
	})

	Vue.component("blog-post", {
		props: ['title'],
		template: '<h3>{{title}}</h3>'
	})

	Vue.component('blog-post1', {
		props: ['post'],
		template: `
    <div class="blog-post1">
      <h3>{{ post.title }}</h3>
      <div v-html="post.content"></div>
    </div>
  `
	})
	Vue.component("blog-post2",{
		props:['post'],
		template: `
    	<div class="blog-post2">
      	<h3>{{ post.title }}</h3>
      		<button @click="$emit('enlarge-text',0.1)">
        	Enlarge text
      		</button>
      	<div v-html="post.content"></div>
    </div>
  `
	})

	var app1 = new Vue({
		el: "#app1",
		data: {
			posts: [{
					id: 1,
					title: 'props1'
				},
				{
					id: 2,
					title: 'props2'
				}
			],
			postFontSize: 1
		}
	})
</script>