1、Vue组件
作用:用来建设Vue实例对象中代码量,日后在使用Vue开发过程中,可以根据不同业务功能将页面中划分成不同的多个组件,然后由多个组件去完成整个页面的布局,便于日后使用Vue进行开发时页面管理,方便开发人员维护。
2、组件使用
2.1、全局组件
注册到Vue中根实例上的组件成为全局组件,全局组件一旦定义可以在任意组件中进行使用。
Vue.component('user',{
template:"<div>用户登录局部组件</div>",
});
2.2、局部组件
第一种写法:
<script src="js/vue.js"></script>
<script>
new Vue({
el:"",
data:{},
...
...
component{
login:{
template:"<div>用户登录局部组件</div>"
}
}
})
</script>
第二种写法:
<script src="js/vue.js"></script>
<script>
const login = {
template:"<div>用户登录局部组件</div>"
};
new Vue({
el:"",
data:{},
...
...
component{
login,
}
})
</script>
第三种写法
<template id="loginTemplate">
<div>用户登录局部组件</div>
</template>
<script src="js/vue.js"></script>
<script>
const login = {
template:"#loginTemplate"
};
new Vue({
el:"",
data:{},
...
...
component{
login,
}
})
</script>
3、组件中定义数据与事件
组件中的数据是放在函数里面的,事件不变
<script>
const user = {
template:"<div><h3>用户列表</h3><h3>{{count}}</h3></div>",
data function(){ //可以简写为data()
//直接写data{},会报错
return{
count:100,
}
}
methods:{
//事件和数据是不相同的,数据放在函数,事件不变。
}
computed:{
//组件中的计算属性
}
}
</script>
4、注意事项
在定义组件名称是如果组件名称使用驼峰命名法,在使用组件时单词必须全部小写,同时使用-作为分隔使用
<html>
<head>...</head>
<body>
<div id="app">
<user-list></user-list>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
Vue.component('userList',{
template:"<div>这是user组件<div>"
});
</script>
5、父组件向子组件进行数据传递 Prop
静态传递数据
<body>
<login aa="欢迎使用"></login>
</body>
<script>
const login = {
template:"<div><h3>用户登录</h3></div>",
data function(){ //可以简写为data()
//直接写data{},会报错
return{
count:100,
}
}
props:['aa']
}
</script>
动态传递数据
<body>
<login v-bind:name="name"></login>
</body>
<script>
const login = {
template:"<div><h3>用户登录</h3></div>",
data function(){ //可以简写为data()
//直接写data{},会报错
return{
count:100,
}
}
props:['name']
}
const app = new Vue({
el:"#app",
data:{
msg:"Vue中组件开发",
name:"小陈",
},
})
</script>