vue基础学习之component

最新推荐文章于 2025-07-09 00:00:12 发布

seven_begain

最新推荐文章于 2025-07-09 00:00:12 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/seven_begain/article/details/79368413

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用Vue.js实现组件的动态复用，并通过具体示例展示了如何定义和使用带有动态属性的组件。文章强调了正确使用模板的重要性，避免因元素过多导致的组件模板错误。

	<body>
		<script type="text/javascript" src="js/vue.js" ></script>
		<div id="app">
			<counter heading="likes" color="green"></counter>
			
			<counter heading="disLikes" color="red"></counter>
		</div>
		<template id="my-counter">
			<!--
            	作者：offline
            	时间：2018-02-25
            	描述：必须要用div（其他也可以如p）包裹动态复用代码 否则会报
            	Component template should contain exactly one root element. 
            	If you are using v-if on multiple elements,
            	 use v-else-if to chain them instead.
            	 的错误
            -->
			<div>
				<h1>{{heading}}</h1>
				<!--
					vue2.x
					不同版本绑定绑定动态style的方法是不一样的
						v-bind:style
				-->
				<button @click="count++" v-bind:style="{'background': color}">{{count}}</button>
			</div>
		</template>
		<script type="text/javascript">
			Vue.component('counter',{
				template:"#my-counter",
				props:['heading','color'],
				data:function(){
					return {count:0}
				}
			})
			var app =new Vue({
				el:'#app',
			
			})
		</script>
	</body>