1.组件的分类
分类：全局组件、局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件的分类</title>
<script type="text/javascript" src="js/vue.min.js"></script>
</head>
<body>
<div id="itany">
<my-hello></my-hello>
<my-world-one></my-world-one>
</div>
</body>
<script type="text/javascript">
// 全局组件，可以在所有vue实例中使用
Vue.component('my-hello',{
template:'<h3>{{name}}</h3>',
data:function(){//在组件中存储数据时，必须以函数形式，函数返回一个对象
return {
name :'alie'
}
}
})
var vm = new Vue({
el:'#itany',
data:{
msg:'wang'
},
components:{
//局部组件 只能在当前vue实例中使用
'my-world-one':{
template:'<h3>{{name}}</h3>',
data(){
return {
name:'beij'
}
}
}
}
})
</script>
</html>
网友评论