这是我参与8月更文挑战的第12天，活动详情查看：8月更文挑战
看到这个单词，我第一个反应就是
@Compent注解（Spring实例化），跟Java中的思想类似，万物皆对象，Vue中是万物皆组件。 Vue推荐使用SPA的标准开发方式（Single Page Application单页WEB应用程序）
1.组件作用
组件作用：用来减少Vue实例（对象）中的代码量，日后在使用Vue开发过程中，可以根据不同的业务功能将页面中划分不同的多个组件，然后多个组件去构建整个页面的布局，便于日后使用Vue进行开发时页面管理（可以做到复用组件），方便日后的维护。
2.组件定义
2.1 全局组件注册
全局组件注册给Vue实例对象，定义之后可以在Vue实例的作用范围内使用该组件。
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<!-- 使用全局注册组件，可以做到复用 -->
<login></login>
<login></login>
</div>
<!-- 1.先引入框架的支持(VUE文件),推荐位置body结束标签的前面(使用的是浏览器运行环境,如果使用NodeJS是另一种引入方式) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 定义全局组件
Vue.component('login',{
template:'<diu><h2>用户登陆页面</h2></diu>'
});
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 全局组件注册'
}
});
</script>
复制代码代码说明：
Vue.component用来开发全局组件
- 参数1：定义组件名称
login - 参数2：组件配置
{}template:''用来书写组件的html代码，template中必须只能存在一个root元素
- 使用时需要在Vue实例的作用范围内根据组件名称使用全局组件
- 如果在注册组件过程中使用，驼峰命名规则组件的方式，在使用组件时，必须将驼峰的所有单词小写加入中划线（
-）进行使用，个人不太推荐驼峰。
2.2 局部组件注册
局部组件注册将组件注册给对应Vue实例中一个components属性来完成组件注册，这种方式不会对Vue实例造成累加。
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<login></login>
<register></register>
<user-table></user-table>
</div>
<!-- 第三种方式 -->
<template id="userTemplate">
<diu><h2>用户列表页面</h2></diu>
</template>
<!-- 1.先引入框架的支持(VUE文件),推荐位置body结束标签的前面(使用的是浏览器运行环境,如果使用NodeJS是另一种引入方式) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 3.创建VUE对象(ViewModel中间件),数据Model -->
<script>
let reg = {
template:'<diu><h2>用户注册页面</h2></diu>'
};
const userTemplate = {
template: "#userTemplate"
};
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 局部组件注册'
},
components:{
login: {//第一种方式：直接定义
template:'<diu><h2>用户登陆页面</h2></diu>'
},
register: reg,//第二种方式：定义变量
userTable: userTemplate//第三种方式:注意我使用了驼峰的方式，脚手架推荐方式
}
});
</script>
复制代码3.组件属性
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<!-- 使用组件名称 -->
<users></users>
</div>
<!-- 1.先引入框架的支持(VUE文件),推荐位置body结束标签的前面(使用的是浏览器运行环境,如果使用NodeJS是另一种引入方式) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 3.创建VUE对象(ViewModel中间件),数据Model -->
<script>
const users = {
template:'<diu><h2>{{title}} - {{name}} - {{count}} -- {{countSqrt}}</h2><button @click="changeCount">递增</button><ul><li v-for="u in userList">{{u}}</li></ul></diu>',
//展示数据信息
data:function (){
return {
title: '用户列表页面',
count: 0,
name: '胖先森',
userList:[]
};
},
created:function(){
this.userList = ["悟空","八戒","唐僧"];
},
methods:{
changeCount:function (){
this.count++;
}
},
computed:{
countSqrt:function (){
return Math.pow(this.count,2);
}
}
};
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 局部组件注册'
},
components:{
users:users
}
});
</script>
复制代码关于父子组件的生命周期的执行过程，我会再后续增加。
- beforeCreate：组件开始初始化，仅仅注册组件自己事件和生命周期函数
- created：组件已经注入data/methods/computed相关数据方法
- beforeMount：将template中指向html编译Vue模版，此时还没有完成模版中内容渲染
- mounted：将template中html编译模版进行数据渲染并且将渲染完成的数据再内存中形成虚拟dom替换template指向dom
- beforeUpdate：当组件中data数据发生变化时，会触发beforeUpdate，此时页面中数据还是原始数据
- updated：此时页面中数据和data属性一致
- beforeDestroy：销毁VUE实例之前触发方法
- destroy：VUE实例已经彻底销毁、监听进制全部消失
4.组件数据传递
4.1 父→子（prop）
作用：props用来给组件传递相应静态数据或者动态数据。
4.1.1 通过组件声明静态数据传递组件内部
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<!-- 使用LOGIN组件 -->
<login show-title="用户登录页面" author="作者：胖先森"></login>
</div>
<!-- 1.先引入框架的支持(VUE文件),推荐位置body结束标签的前面(使用的是浏览器运行环境,如果使用NodeJS是另一种引入方式) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 3.创建VUE对象(ViewModel中间件),数据Model -->
<script>
const login = {
template:'<diu><h3>{{title}} - {{author}} - {{showTitle}}</h3></diu>',
//展示数据信息
data:function (){
return {//注意：在prop中定义数据不能在data中进行重复定义，如果重复定义优先使用props中数据为主
title: this.showTitle
};
},
props:["showTitle","author"]
};
//父组件（根组件）
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 数据传递'
},
components:{
login:login//子组件
}
});
</script>
复制代码4.1.2 通过组件声明动态数据传递组件内部
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<!-- 使用LOGIN组件 -->
<login :show-title="bookName" author="作者：胖先森"></login>
</div>
<!-- 1.先引入框架的支持(VUE文件),推荐位置body结束标签的前面(使用的是浏览器运行环境,如果使用NodeJS是另一种引入方式) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 3.创建VUE对象(ViewModel中间件),数据Model -->
<script>
const login = {
template:'<diu><h3>{{title}} - {{author}} - {{showTitle}}</h3></diu>',
//展示数据信息
data:function (){
return {//注意：在prop中定义数据不能在data中进行重复定义，如果重复定义优先使用props中数据为主
title: this.showTitle
};
},
props:["showTitle","author"]
};
//父组件（根组件）
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 数据传递',
bookName: '西游记'
},
components:{
login:login//子组件
}
});
</script>
复制代码4.2 子→父（$emit）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>父组件传递数据给子组件</title>
</head>
<body>
<div id="app"><!-- 必须给需要绑定的元素,设置选择器(支持CSS的选择器,但是我推荐使用ID选择,容器是唯一) -->
<h2>{{title}}</h2>
<!-- 在组件中传递父组件的事件，使用@事件别名=“findAll父组件的事件名称” -->
<login @listall="findAll" @test="test"></login>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 登录组件
const login = {
template: '<div><h3>用户登录</h3><button @click="subTest" >点击触发事件</button></div>',
data:function(){
return {
};
},
methods:{
subTest:function (){
alert("子组件定义的事件,可以使用$emit用来调用父组件中的事件");
this.$emit("listall");
this.$emit("test",{name:"悟空",age:18})
}
}
};
// 父组件（根组件）
let vm = new Vue({
el: '#app',
data: {
title: '组件学习 - 子组件传递给父组件',
},
methods:{
findAll:function (){
alert("父组件中定义的事件")
},
test:function (book){
alert("接收子组件传递的数据："+book.name+",年龄："+book.age);
}
},
components:{
login:login
}
});
</script>
</body>
</html>
复制代码© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![[桜井宁宁]COS和泉纱雾超可爱写真福利集-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/4d3cf227a85d7e79f5d6b4efb6bde3e8.jpg)
![[桜井宁宁] 爆乳奶牛少女cos写真-一一网](https://www.proyy.com/skycj/data/images/2020-12-13/d40483e126fcf567894e89c65eaca655.jpg)
