组件data必须是一个函数,且只能有一个根元素,以及局部注册组件

最新推荐文章于 2021-10-12 22:34:10 发布

俗世凡人行

最新推荐文章于 2021-10-12 22:34:10 发布

阅读量248

点赞数 1

分类专栏： Vue 文章标签： data函数局部组件

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107596504

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

组件data

一个组件的data选项必须是一个函数, 因此每个实例可以维护一份被返回对象的独立的拷贝

组件里面的data是一个函数,函数返回的是一个对象,对象里面的数据才同外面的data一样;

Vue.component('my-button',{
		template:'<button @click="count++">点我{{count}}</button>',
		data:function(){
			return {
				count:0
			}			
		}
	});

单个根元素

每个组件必须只有一个根元素;

标签太长用反引号断行,ul是一个root根节点,不能出现并且的节点,如果要使用,必须在其外面再包一层,最外一层只能有一个,不能出现并列标签;

局部注册组件

全局注册往往不够理想的, 比如, 如果你使用一个像webpack这样的构建系统, 全局注册所有的组件意味着即便你已经不再使用一个组件了, 它仍然会被包含在你最终的构建结果中; 这造成了用户下载的JavaScript的无谓的增加;

var compotent_h1 = {
    template:'<h1>{{msg}}</h1>',
    data:function(){
        return {msg:'您好'}
    }
}

var vm = new Vue({
    el:'#app',
    components:{
        'my-h':compotent_h1
    }
});

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 组件也必须写到vue挂载的实例里面 -->
			<!-- <my-button></my-button> -->
			<!-- <my-ul></my-ul> -->
			<my_span></my_span>
			
		</div>		
	</body>
</html>
<script type="text/javascript">	
    //注册一个全局组件 ,命名推荐用短横线
	//my-div是自定义的一个组件名字,然后需要去模板里面定义
 //    Vue.component('my-button',{
	// 	template:'<button @click="count++">{{msg}}{{count}}</button>',
	// 	// 组件里面的data是一个函数,函数返回的是一个对象,对象里面的数据才同外面的data一样
	// 	data:function(){
	// 		return {
	// 			count:0,
	// 			msg:'点点点'
	// 		}			
	// 	}
	// });
	// Vue.component('my-ul',{
	// 	// 标签太长用反引号断行,ul是一个root根节点,不能出现并且的节点,如果要使用,必须再包一层
	// 	template:`<div>
	// 	             <ul>
	// 	               <li>1</li>
	// 	               <li>2</li>
	// 			    </ul>
	// 			    <p>下一页</p> 
	// 			   </div>
	// 			  `,
	// 	data:function(){
	// 		return {
	// 			count:0,
	// 			msg:'点点点'
	// 		}			
	// 	}
	// });
	
	// 局部组件
	var my_span = {
		template:'<span>{{msg}}</span>',
		data:function(){
			return {
				msg:"hello Vue"
			}
		}
	}
	
	var vm = new Vue({	
		el:'#app',	
	    components:{
			'my_span':my_span,
		}
	})	
	
</script>