6、Vue中组件（Component）
6.1、组件作用
组件作用：用来减少Vue实例中的代码量，日后在使用vue开发的过程中，可以根据不同业务功能将页面划分不同的多个组件，然后由多个组件去完成整个页面的布局。便于日后使用Vue进行开发时页面管理，方便开发人员维护。
6.2、组件的使用
6.2.1、全局组件注册
说明：全局组件注册给Vue实例，日后可以在任意Vue实例的范围内使用该组件
1、开发一个全局组件
//全局组件注册 参数1：组件名称 参数2：组件配置对象:{}
// template：用来书写组件的html模板（注意：在template中必须存在一个容器 例如 div）
Vue.component('login',{
template:'<div> <h1>用户登录</h1> </div>'
});
2、使用全局组件 在Vue实例范围内
<login></login>
# 注意：
1、Vue.component 用来开发全局组件
参数1： 组件名称
参数2：组件配置():'' 用来书写组件的html代码，template中必须有一个root元素
2、使用时需要在Vue的作用范围内根据与组件名使用全局组件
3、如果在注册组件的过程中使用 驼峰命名组件的方式，在使用组件时，必须将驼峰的所有单词小写加入—进行使用
6.2.2、局部组件的使用
说明：通过将组件注册给对应Vue实例中一个Components属性来完成组件注册，这个方式不会对Vue实例造成累加
- 第一种开发方式
<script>
//局部组件登录模板
let login ={
//具体组件名称
template: '<div><h2>小爽帅到拖网速2</h2></div>'
}
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
},
components:{
//用来注册局部组件
login:login //注册局部组件
}
});
</script>
//局部组件使用 在Vue实例范围内
<login></login>
-
第二种开发方式
//1、声明局部组件模板，template 标签：注意 ：Vue实例作用访问外声明 <template id="loginTemplate"> <h1>小爽帅到拖网速 之 方式二</h1> </template> //2、定义变量用来保存模板配置对象 let login={ //具体局部组件名称 template:'#lgoinTemplate' //使用自定义template标签选择器即可 }; //3、注册组件 const app = new Vue({ el: "#app", data: { msg: "小爽帅到拖网速", }, methods: { }, components:{ //用来注册局部组件 login:login //注册局部组件 } }); //4、局部组件使用 在Vue实例范围内 <lgoin></login>
6.3、Prop的使用
作用：props用来给组件传递相应静态数据或者是动态数据
6.3.1、通过在组件上声明静态数据传递给组件内部
//1、声明组件模板配置对象 props作用 用来接收使用组件时通过组件标签传递的数据
let login={
template:"<div><h1>欢迎:{
{name}} 座右铭：{
{motto}}</h1></div>",
props:['name','motto']
}
//2、注册组件
const app = new Vue({
el: "#app",
data: {
},
methods: {
},
components:{
login //组件注册
}
});
//3、通过组件完成数据传递
<login name="小爽" motto="木叶飞舞之处，火亦生生不息！"></login>
# 总结
1、使用组件时可以在组件上定义多个属性以及对应数据
2、在组件内部可以使用props数组声明多个定义在组件上的属性名 日后可以在组件中通过{
{属性名}}方式获取数组中属性值
6.3.2、通过在组件上声明动态数据传递给组件内部
//1、声明组件模板对象
//定义一个局部组件声明
const login={
template:'<div><h2>火影:{
{name}} 年龄：{
{age}}</h2></div>',
props: ['name','age']
}
//2、注册局部组件
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
Age:21
},
methods: {
},
components:{
login //注册组件
}
});
//3、使用组件
//使用v-bind 形式将数据绑定Vue实例中data属性，日后data属性发生变化，组件内部数据也跟着发生变化
<login :name="msg" :age="Age"></login>
6.3.3、prop的单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。
6.4、组件中定义数据和事件
1、组件中定义属于组件的数据
const login={
template:"<div><h1>欢迎：{
{name}} </h1> <ul><li v-for='(item,index) in lists'>{
{index+1}}:{
{item}}</li></ul></div>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
}
}
2、组件中事件的定义
const login={
template:"<input type='button' @click='change' value='点击触发事件'>",
data(){
return {
name:"小爽",
lists:['spring','springMVC','Mybatis']
}
},
methods:{
change(){
alert(this.name);
}
}
}
# 总结
1、组件中定义事件和直接在Vue中定义事件基本一致，直接在组件内部对应html代码加入@事件名-函数名方式即可
2、在组件内部使用methods属性用来定义对应的事件即可，事件函数中this指向的是当前组件的实例
6.5向子组件中传递事件并在子组件中调用该事件
在子组件汇总调用传递过来的相关事件必须使用 this.$emit(‘函数名’) 方式调用
//1、声明组件
const login = {
template: "<div> <h1>小爽{
{message}} </h1><input type='button' value='点击' @click='change'></div>",
/*不能再子组件中改变数据*/
data() {
return {
message: this.name
}
},
methods: {
change() {
//调用Vue实例中的函数
this.$emit('find'); //调用组件传递过来的其他函数时需要使用this.$emit('函数名调用')
}
},
props: ['name']
}
//2、组件注册
const app = new Vue({
el: "#app",
data: {
msg: "小爽帅到拖网速",
},
methods: {
findAll(){
//一个事件函数 将这个函数传递给子组件
alert('Vue实例中定义的函数')
}
},
components: {
login
}
});
//3、使用组件
<div id="app">
<login :name="msg" @find="findAll"></login> ======》 在组件内部使用 this.$emit('find')
</div>