一、组件的作用
用来减少实例对象中的代码量，将不同的业务功能划分成不同的组件，由多个组件去进行整个页面的布局，便于进行页面管理
二、全局组件注册
全局组件注册给Vue实例 可以再Vue实例中的任何位置使用这个组件
定义全局组件
Vue.component('login',{
template:`<div>
<h1>用户登录</h1>
<form action=""></form>
</div>`
})使用全局组件(在Vue范围内)
<div id="app">
<login></login>
</div>总结：
组件不能使用驼峰命名，建议使用下划线隔开
三、局部组件注册
局部组件注册方式一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h1 id="h1">{
{msg}}</h1>
<login></login>
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
//定义局部模板名称
let myLogin = {
template: `<div>
<h1>用户登录</h1>
<form action=""></form>
</div>`
}
const vm = new Vue({
el:'#app',
data:{
msg:'恕瑞玛'
},
methods:{
},
components:{
//页面里的标签名字 : 定义的局部组件名字
login: myLogin
}
})
</script>局部组件注册方式二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 1.声明局部模板 template要在Vue实例作用范围外声明-->
<template id="loginMode">
<h1 >用户登录</h1>
</template>
<div id="app">
<!-- 4.组件的使用-->
<login></login>
<h1 id="h1">{
{msg}}</h1>
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
//2.定义变量用来保存模板的配置对象
let myLogin = {
template:'#loginMode'//使用自定义id选择器
}
const vm = new Vue({
el:'#app',
data:{
msg:'恕瑞玛'
},
methods:{
},
// 3.注册组件
components:{
login:myLogin
}
})
</script>