vue中组件的定义

最新推荐文章于 2024-06-18 23:15:23 发布

Haikin Tei

最新推荐文章于 2024-06-18 23:15:23 发布

阅读量457

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42683507/article/details/117959380

版权

在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。

1.定义组件（方法一）

①定义组件

		// 定义组件
	<script>
		var vheader=Vue.extend({
			template:'<div><h2>{{msg}}</h2></div>',
			data(){
				return {
					msg:'这个是v-header的标签'
				}
			}
		})
	</script>

②挂载组件

		// 挂载组件
	<script>
			new Vue({
			el:'#app',
			components:{
				'v-header':vheader
			}
		})
	</script>

③添加占位符

	<body>
		<div id="app">
			<v-header></v-header>
		</div>
	</body>

2.定义组件（方法二）

①在body中定义组件，并且写好组件的id

		<template id="counter">
			<div>
				<button type="button" @click="minus()">-</button>
				<h3>{{num}}</h3>
				<button type="button" @click="add()">+</button>
			</div>
		</template>

②script中定义变量，包含组件名称（id）,数据还有方法

	<script>
		var vcount={
			template:'#counter',
			data(){
				return {
					num:0
				}
			},
			methods:{
				add(){
					this.num++
				},
				minus(){
					this.num--
				}
			}
		}
	</script>

③创建vue对象，实现挂载

	<script>
		new Vue({
			el:'#app',
			components:{
				'v-count':vcount
			}
		})
	</script>

④在body中使用定义完毕的占位符

	<body>
		<div id="app">
			<v-count></v-count>
		</div>
	</body>

在这里插入图片描述

Haikin Tei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中组件的定义

在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。1.定义组件（方法一）①定义组件 // 定义组件 <script> var vheader=Vue.extend({ template:'<div><h2>{{msg}}</h2></div>', data(){ return { msg:'这个是v-header的标签' } } })
复制链接

扫一扫