VUE局部组件

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

代码如下

<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>

相关推荐

  1. Vue局部组件

    2024-01-09 14:58:01       8 阅读
  2. Vue2组件注册:全局组件局部组件

    2024-01-09 14:58:01       29 阅读
  3. 如何使用vue定义组件之——全局or局部

    2024-01-09 14:58:01       25 阅读
  4. Vue中实现【组件局部刷新】及【页面刷新】

    2024-01-09 14:58:01       16 阅读
  5. Vue.component v2v3注册(局部与全局)组件使用详解

    2024-01-09 14:58:01       12 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-09 14:58:01       19 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-09 14:58:01       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-09 14:58:01       20 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-09 14:58:01       20 阅读

热门阅读

  1. RabbitMQ笔记

    2024-01-09 14:58:01       32 阅读
  2. 安全认证 | CISP证书学习需要多长时间?

    2024-01-09 14:58:01       37 阅读
  3. 55. 跳跃游戏

    2024-01-09 14:58:01       33 阅读
  4. Linux磁盘空间与文件大小查看命令详解

    2024-01-09 14:58:01       31 阅读
  5. 亚马逊API:如何高效获取全球商品详情的指南!

    2024-01-09 14:58:01       44 阅读
  6. eureka工作原理

    2024-01-09 14:58:01       31 阅读
  7. 【深入理解 ByteBuf 之二】对象池设计模式概述

    2024-01-09 14:58:01       36 阅读
  8. 第五讲_css元素显示模式

    2024-01-09 14:58:01       37 阅读