关于组件
组件是可复用的vue实例,将重复使用的内容作为一个组件,后面利用组件即可
全局组件和局部组件都可以模板外置
全局组件:定义在vue实例外面
定义组件:定义组件中模板内容
注册组件 第一个参数为组件标签名 第二个参数为组件的名字
使用组件 在div中使用组件 组件可以重复使用
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<aa></aa>
<aa></aa>
</div>
</body>
<!-- 脚本部分 -->
<script type="text/javascript">
//定义全局组件
var AA = Vue.extend({
//定义模板
template:"<h1>还有四天就放假了---全局组件</h1>"
});
//注册组件
Vue.component('aa',AA);
//创建vue对象
new Vue({
el:"#app",
//数据
data:{
}
})
</script>
全局组件外置模板写法:
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<aa></aa>
</div>
<!-- 定义模板 -->
<template id="aatemp">
<div><!-- 有且只有一个父节点 div -->
<h1>哈哈哈哈哈</h1>
<h2>呵呵呵呵呵</h2>
</div>
</template>
</body>
<!-- 脚本部分 -->
<script type="text/javascript">
// 定义组件
var AA = Vue.extend({
//定义模板
template:"#aatemp"
});
//注册组件
Vue.component('aa',AA)
//创建vue对象
new Vue({
el:"#app",
//数据
data:{
}
})
局部组件:定义在vue实例里面
<!-- 引入vue.js -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 视图部分 -->
<div id="app">
<aa></aa>
</div>
<!-- 定义外置模板 -->
<template id="aatemp">
<div>
<h1 @click="run()">{{msg}}</h1>
</div>
</template>
</body>
<!-- 脚本部分 -->
<script type="text/javascript">
//创建vue对象
new Vue({
el:"#app",
//数据
data:{
},
//局部组件 采用键值对方式定义
components:{
//组件名(标签名)
aa:{
//组件的数据
data(){
return{//键值对方式定义
msg:"局部组件中的数据data"
}
},
//模板
template:"#aatemp",
//函数
methods:{
run:function(){
this.msg = "值变了";
}
}
}
}
})
</script>
父组件中创建子组件 父组件向子组件传递内容
父组件向子组件传递内容 通过props属性
1.定义各个组件的内容
2.在子组件中定义props属性 props属性默认数组形式 带引号
3.在父组件中传递数据给子组件 通过绑定属性的形式
4.在子组件中 使用父组件的数据
<body>
<!-- 视图部分 -->
<div id="app">
<aa></aa>
</div>
<template id="aatemp">
<!-- 有且只有一个父节点 -->
<div>
<h1>{{msg}}</h1>
<h2>{{msg2}}</h2>
<!-- 使用子组件 通过绑定属性的形式定义-->
<bb :m="msg" :n="msg2"></bb><!-- 父向子传递数据 父变量不需要双花括号 -->
</div>
</template>
</body>
<!-- 脚本部分 -->
<script type="text/javascript">
//创建vue对象
new Vue({
el:"#app",
//数据
data:{
},
//定义组件
components:{
//组件名
aa:{
//定义数据
data(){
return{
msg:"父组件的data",
msg2:"父组件的data2"
}
},
//定义模板
template:"#aatemp",
//定义组件
components:{
//组件名
bb:{
//定义props属性 固定写法 默认数组形式
props:["m","n"],
//定义数据
data() {
return{
bmsg:"子组件的data"
}
},
//定义模板
template:"<h3>{{bmsg}}--{{m}}--{{n}}</h3>"
}
}
}
}
})
</script>