VUE局部组件

最新推荐文章于 2024-07-02 08:55:42 发布

xi_weina

最新推荐文章于 2024-07-02 08:55:42 发布

阅读量419

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/xi_weina/article/details/135390849

版权

实现局部组件的注册功能，样例如下

代码如下

<html>
	<head>
		<meta charset="utf-8">
		<title></title>

	</head>
	<body>
		<div id="app">
			<hello-word></hello-word>
			<hello-tom></hello-tom>

		</div>
		<script src="js/vue.js"></script>
		<script>
			
			//局部组件注册
			var HelloWord = {
				data: function() {
					return {
						msg:'HelloWord'
					}
				},
				template:'<div>{{msg}}</div>'
			}
			var HelloTom = {
				data: function() {
					return {
						msg:'HelloTom'
					}
				},
				template:'<div>{{msg}}</div>'
			}

			var vm = new Vue({
				el: '#app',
				data: {

				},
				components: {
					'hello-word':HelloWord,
					'hello-tom':HelloTom
				}
			})
		</script>
	</body>
</html>