一、组件感受
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<script>
// 定义一个名为 button-counter的全局组件
Vue.component('button-counter',{
data:function (){
return {
count: 0
}
},
template:'<button v-on:click="count++">点我{{count}}次了</button>'
})
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
运行结果
使用的组件的好处：
1、提高开发效率
2、方便重复使用
3、简化调式步骤
4、提升整个项目的可维护性
5、便于协同开发
二、组件的注册
1、组件注册类型：全局注册和局部注册
2、全局注册
第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
/*
全局注册：必须确保在实例初始化之前注册，这样才能在任意实例种被使用。全居住从有三种方式
命名推荐：使用小写字母加 “-” 分隔符的形式命名
注意：
1、template的DOM结构必须被一个而且是唯一一个根元素所包含，直接引用而不被“<div></div>”包裹是无法被渲染的
2、
Vue.component('组件名称',{
// 选项
})
*/
Vue.component('my-component',{
template:'<h1>全局注册</h1>'
})
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
运行结果
第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<script>
var list=Vue.extend({
template:'<h1>组件的第二种注册方式</h1>'
});
Vue.component('my-component',list);
// 根实例
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
运行结果
第三种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="tmpl">
<div><a href="#">登录</a>|<a href="">注册</a></div>
</template>
<script>
Vue.component('my-component',{
template: '#tmpl'
});
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
运行结果
3、组件的局部注册
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<account></account>
<login></login>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{},
methods:{},
components:{ // 定义子组件
account:{
template:'<div><h1>定义的是子组件*****</h1></div>'
},
// 定义子组件的子组件
login:{
template:'<h1>这是子组件</h1>'
}
}
})
</script>
</body>
</html>
运行结果
三、组件选项
Vue组件可以理解为预先定义好的行为ViewModel类。一个组件可以预先定义很多选项。但是最核心的有一下几个。
1、模板（template）：模板生命了数据和最终展示给用户的DOM之间的映射关系
2、初始数据（data）：一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态。
3、接受的外部参数（props）：组件之间通过参数来进行数据的传递和共享。参数默认是单项绑定（由上至下），但也可以显示声明为双向绑定
4、方法（methods）：对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定
5、生命周期钩子函数（lifecycle hooks）：一个组件会触发多个生命周期钩子函数，例如created、attached、destroyed等。
四、组件props
1、静态props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<my-component message="1+1"></my-component>
<hr>
<!-- 如果不是用v-bind页面显示的就是字符串，使用了就会当做javaScript进行计算 -->
<my-component :message="1+1"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template:'<span>{{message}}</span>'
})
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
运行结果
2、动态props
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="parentMessage">
<my-component :message="parentMessage"></my-component>
</div>
<script>
Vue.component('my-component',{
props:['message'],
template:'<span>{{message}}</span>'
})
var vm=new Vue({
el:'#app',
data:{
parentMessage:''
}
})
</script>
</body>
</html>
运行结果
3、单向数据流
所有的props都使得其父子props之间形成了一个单向下绑定：父级props的更新会向下流动到子组件种，但是反过来则不行。目的是为了尽可能将父子组件解耦。避免子组件无意中修改了父组件的状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 使用CDN的方式引入Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script>
var childNode={
template:'<div><div><span>子组件数据流</span>'+
'<input type="text" v-model="childMsg"></div><p>{{childMsg}}</p></div>',
props:['childMsg']
}
var parentNode={
template:'<div><div><span>父组件数据流</span>'+
'<input v-model="msg"></div><p>{{msg}}</p><child :childMsg="msg"></child></div>',
components:{
'child':childNode
},
data(){
return{
'msg':'match'
}
}
}
var vm=new Vue({
el:'#app',
components:{
'parent':parentNode
}
})
</script>
</body>
</html>
运行结果
