vue自定义组件

最新推荐文章于 2025-07-09 09:11:41 发布

原创最新推荐文章于 2025-07-09 09:11:41 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

vue中的组件其实就是一个自定义标签；

关于优点我就不再强调了，老生常谈了；

不啰嗦了，上代码：

这是全局注册

先看一下html的代码：

<body>
<div id="box">

<seclect-box></seclect-box>		
<seclect-box></seclect-box>		

</div>	
</body>

<select-box>是我自定义的标签。

js代码：

<script type="text/javascript">

	window.onload=function(){
		//vue组件其实就是自定义标签
			Vue.component('seclect-box',{
				template:`<select id="box">
				<option>北京</option>
				<option>上海</option>
				<option>南京</option>
			</select>`
		})

			new Vue({
				el:'#box'

			})
		}
</script>

这样就OK了。看一下效果吧，很丑，我没写样式的。

如果你想用多个，就继续复制<select-box></select-box>标签就好了。是不是很方便~

下面是局部注册的方法，

new Vue({
		el:'#box',
                components:{
                  'seclect-box':{
                  	template:`<select id="box">
		 		<option>北京</option>
		 		<option>上海</option>
		 		<option>南京</option>
		 	</select>`
                  }
                }

			})

组件只能够在当前#box下面使用了。