给个免费的网站好人有好报,wordpress快速清除本地图片,文档生成器app,电商公司网站文章目录前言组件化开发底部菜单 TabMenu父子组件相互传数据父传子#xff1a;自定义属性子传父#xff1a;自定义事件父子组件互传案例插槽 slot多个插槽总结组件化开发总结Vue组件的基本组成子组件使用的三个步骤父子组件相互传递数据前言
提示#xff1a;这里可以添加本…
文章目录前言组件化开发底部菜单 TabMenu父子组件相互传数据父传子自定义属性子传父自定义事件父子组件互传案例插槽 slot多个插槽总结组件化开发总结Vue组件的基本组成子组件使用的三个步骤父子组件相互传递数据前言
提示这里可以添加本文要记录的大概内容
Vue.js 是一种现代化的前端框架可以用于构建可复用的组件化应用程序。Vue.js 提供了一种基于组件的架构使得开发人员可以将应用程序分解为多个可重用的组件。
Vue.js 组件是一个可复用的代码模块可以在 Vue.js 应用程序中使用。组件包括 HTML 模板、JavaScript 代码和 CSS 样式并且可以包含其他组件。
Vue.js 组件化开发的主要优势包括 模块化Vue.js 组件使得应用程序变得更易于管理和维护可以将应用程序分解为多个小模块每个模块都有自己的功能和样式。 可重用性组件化开发使得开发人员可以编写可重用的代码片段可以在不同的项目中使用并且可以在同一应用程序中多次使用。 维护性组件化开发使得代码更加模块化更易于维护和测试。 性能在 Vue.js 中使用组件可以提高应用程序的性能因为它可以在需要时延迟加载组件。
总之Vue.js 组件化开发是一种高效的方式可以帮助开发人员构建可维护和可重用的应用程序。 提示以下是本篇文章正文内容下面案例可供参考
组件化开发
首先Ctrlc 停止上面项目访问新建一个项目 cd ..返回上一级
接下来就是把【创建Vue-Cli工程】的过程再来一遍 完整过程
新建文件夹【vue create 小写名字】vue create component 。component组件化开发选择最后一个Manually select features空格去掉倒数第三个( * ) Linter / Formatter默认选择3.x选择倒数第二个In package.json不保存 n
出现Successfully代表创建成功 打开项目进行一些默认操作
①、用脚手架创建项目时把脚手架生成的代码删除掉 ②、删除App.vue内所有代码随后输入vue选择第一个
在template标签中加代码 h1{{ title }}/h1在script标签中的data函数的返回对象加代码
title:我是根组件打开终端输入npm run serve就可以运行了 在components文件夹下新建个子组件TabMenu.vue名字是驼峰式命名
生成基本结构输入vue回车加点代码与样式这里可以随便写主要是展示子组件的使用 现在一个根组件App.vue一个子组件TabMenu.vue运行 那么如何在根组件中使用子组件呢 底部菜单 TabMenu
以App.vue根组件TabMenu.vue子组件为例
导入需要的子组件在script标签内
import TabMenu from /components/TabMenu.vue; //相当于src或者写成
import TabMenu from ../components/TabMenu.vue;当然需要在components 文件夹下新建 TabMenu 视图 详细代码
!-- 定义组件的模板 --
templatediv!-- 底部选项卡 --ul classtab-menu!-- 首页选项 --li clickgotoIndexi classfa fa-home/ip首页/p/li!-- 发现选项 --li clickgotoBusinessi classfa fa-compass/ip发现/p/li!-- 订单选项 --li clickgotoMyOrdersi classfa fa-file-text-o/ip订单/p/li!-- 我的选项 --li clickgotoMyi classfa fa-user-o/ip我的/p/li/ul/div
/templatescript
// 引入路由
import router from /router;export default {data() {return {}},methods: {// 跳转到首页gotoIndex() {router.push(/)},// 跳转到个人中心gotoMy() {// 判断是否登录let login sessionStorage.getItem(login)if (login null) {// 未登录则跳转到登录页router.push(/login)} else{// 已登录则跳转到个人中心页router.push(/my)}},// 跳转到发现页gotoBusiness() {router.push(/business)},// 跳转到我的订单页gotoMyOrders() {router.push(/myOrders)}},components: {},computed: {},watch: {},mounted() {},
}
/scriptstyle scoped/* 底部选项卡样式 */.tab-menu{width: 100vw; /* 设置选项卡宽度为屏幕宽度 */height: 14vw; /* 设置选项卡高度为14vw */background-color: #fff; /* 设置选项卡背景色为白色 */border-top: 0.2vw solid #ddd; /* 设置选项卡上边框为0.2vw宽的灰色实线 */display: flex; /* 设置选项卡为弹性布局 */justify-content: space-around; /* 设置选项卡内子元素沿主轴间距相等 */align-items: center; /* 设置选项卡内子元素沿侧轴居中对齐 */position: fixed; /* 设置选项卡为固定定位 */left: 0; /* 设置选项卡距离左侧为0 */bottom: 0; /* 设置选项卡距离底部为0 */}/* 选项样式 */.tab-menu li{display: flex; /* 设置选项为弹性布局 */flex-direction: column; /* 设置选项内子元素排列方向为垂直方向 */justify-content: center; /* 设置选项内子元素沿主轴居中对齐 */align-items: center; /* 设置选项内子元素沿侧轴居中对齐 */color: #999; /* 设置选项内子元素颜色为灰色 */}
/style在 components 的配置项中注册子组件
components: {TabMenu},在template中以标记的语法使用子组件
TabMenu/TabMenu 当然在命令行中运行上这句npm i font-awesome
效果
父子组件相互传数据 在父子组件中如何让他俩可以相互发数据 以App.vue根组件Data.vue子组件为例
父传子自定义属性
先写先接受数据的一方
父给子传数据先给子组件里面增加一个新个配置项props自定义属性的意思
在components文件中新建子组件Data.vuescript标签内 vue生成基本结构后增加props配置项 // 数组形式里面自定义名字props: [test]在template标签内加上插值语法把上面的自定义名字加上去
templatedivh1数据子组件/h1h1这是父组件传递给我的数据{{ test }}/h1/div
/template在父组件中再导入该子组件在script标签内
import Data from /components/Data.vue在components的配置项中注册子组件 components: {TabMenu,Data}, //TabMenu是另一个子组件多个子组件用逗号隔开在template中以标记的语法使用子组件
Data/Data父组件App.vue中完整代码
templatedivh1{{ title }}/h1!-- 3.在template中以标记的语法使用子组件 --TabMenu/TabMenuData/Data/div
/templatescript
// 1.导入需要的子组件
import TabMenu from /components/TabMenu.vue;
import Data from /components/Data.vue
export default {data () {return {title:我是根组件}},methods: {},//2.在components的配置项中注册子组件components: {TabMenu,Data}, //TabMenu是另一个子组件多个子组件用逗号隔开computed: {},watch: {},mounted () {}
}
/script
style scoped
/style输出效果 但是现在里面还没有数据因为在Data.vue中test是自定义属性
接下来在父组件中加入自定义属性
Data test你好啊/Data如果说要在子组件里再定义一个属性父组件再传一个只需要在相应位置加上属性后用逗号隔开即可
子组件中 父组件中
子传父自定义事件
recive()接收子给父传上来的数据有参代表传来的数据
在父组件中
自定义一个事件这里取名abc Data test你好啊 test1世界 abc recive/Data在methods配置项中定义recive()函数方法 methods: {recive(d){// d代表子给父发的数据this.title d //更改title值}},子组件中 在子组件中编写一个函数加入一个事件 给v-model的属性tes在data函数的return里面配置一下 methods内加上send方法 send(){this.$emit(abc,this.text)//this.$emit(在父组件中配置的事件名字,this.发送给父组件的数据)}最后输出
父子组件互传案例
一个App父组件 两个子组件一个添加待办事项组件、一个待办列表组件
如果之前有项目在终端开着先Ctrlc关掉 然后新建一个待办项目vue create todo然后依次回车选择配置选项 然后进入到 todo 项目中删掉HelloWorld.vue文件 和 App.vue中所有代码输入vue重新生成
在components文件夹中创建新子组件AddItem.vue 和 List.vue
在父组件中使用子组件
导入需要的子组件在 components 的配置项中注册子组件在 template 中以标记的语法使用子组件
目前为止父组件中代码
templatedivh1待办事项/h1!-- 3.使用 --AddItem/AddItemList/List/div
/templatescript
// 1. 导入
import AddItem from /components/AddItem.vue;
import List from /components/List.vue;
export default {data () {return {}},methods: {},// 2.注册components: {AddItem,List},computed: {},watch: {},mounted () {}
}
/script
style scoped
/style接下来先把List待办列表弄出来再写待办事项也就是写个父给子的数据传递 增加自定义的属性使用 v-for 指令对 todolist 进行循环渲染将 todolist 中的每个元素都显示为一个有序列表中的一条{{ item }} 则是将前面 item 变量名插入到模板中进行渲染。
由于本组件需要从父组件中接收一个名为 todolist 的属性所以使用 props 选项来声明了一个具名的 todolist 属性
最后加了点CSS样式
下面是完整的 List.vue 代码
templatedivul!-- 使用 v-for 指令遍历传入的 todolist 数据生成 li 列表项 --li v-for(item, index) in todolist :keyindex{{ item }}/li!-- 2.使用插值语法把上面的自定义名字加上去 --/ul/div
/templatescript
export default {// 1.定义一个 props 属性接收父组件传递的 todolist 数据 (自定义的属性)props: [todolist]
}
/scriptstyle scoped
/* 为 ul 列表设置样式 */
ul {list-style: none; /* 取消列表项的默认样式 */margin: 0; /* 去除外边距 */padding: 0; /* 去除内边距 */display: flex; /* 将列表项设为弹性项目 */flex-wrap: wrap; /* 当空间不足时自动换行 */
}/* 为 li 列表项设置样式 */
li {font-size: 1.2rem; /* 设置字体大小 */color: #333; /* 设置字体颜色 */background-color: #f5f5f5; /* 设置背景颜色 */border-radius: 5px; /* 设置圆角 */margin: 0.5rem; /* 设置外边距 */padding: 1rem; /* 设置内边距 */box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 12px rgba(0, 0, 0, 0.1); /* 设置阴影 */text-align: center; /* 设置文本居中 */transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0, 0, 0.2, 1); /* 设置过渡效果 */
}/* 当鼠标悬停在 li 列表项上时的样式 */
li:hover {transform: translateY(-5px);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2), 0 0 12px rgba(0, 0, 0, 0.2);
}
/style第一步在父组件data中把待办事项的数据定义出来 data () {return {items: [学习,做事,赚钱]// a.把items数据传给list组件去用用属性todolist去传}},第二步用list组件动态绑定items数据
List :todolistitems/List最后父组件中完整代码
templatedivh1待办事项/h1!-- 3.使用 --AddItem/AddItem!-- b.list组件 加上冒号是动态绑定items数据--List :todolistitems/List/div
/templatescript
// 1. 导入
import AddItem from /components/AddItem.vue;
import List from /components/List.vue;
export default {data () {return {items: [学习,做事,赚钱]// a.把items数据传给list组件去用用属性todolist去传}},methods: {},// 2.注册components: {AddItem,List},computed: {},watch: {},mounted () {}
}
/script
style scoped
/style现在打开终端进入该项目路径下启动该项目npm run serve 启动后运行 接下来是子给父传数据 第一步加上自定义事件 第二步放在methods接受要带参数
!-- 第一步自定义事件 --
AddItem itemrecive/AddItem
...
//中间代码胜率
...methods: {// 第二步放在methods接受的话要带参数recive(d){this.items.unshift(d) }},父组件中完整代码是
templatedivh1待办事项/h1!-- 3.使用 --!-- 第一步自定义事件 --AddItem itemrecive/AddItem !-- b.list组件 加上冒号是动态绑定items数据--List :todolistitems/List/div
/templatescript
// 1. 导入
import AddItem from /components/AddItem.vue;
import List from /components/List.vue;
export default {data () {return {items: [学习,做事,赚钱]// a.把items数据传给list组件去用用属性todolist去传}},methods: {// 第二步放在methods接受的话要带参数recive(d){this.items.unshift(d) }},// 2.注册components: {AddItem,List},computed: {},watch: {},mounted () {}
}
/script
style scoped
/style下一步到子组件AddItem.vue里面
1在里面加一个输入框和按钮 input typetext v-modelitembutton clicksend添加/button2data里面配数据 data () {return {item: }},3在methods里把数据发送给父组件 methods: {send(){this.$emit(item,this.item)}},然后在给css内加点样式
最后AddItem.vue完整代码
templatediv classinput-container !-- 输入框容器 --input typetext v-modelitem placeholder输入待办事项 classinput-field !-- 输入框 --button clicksend classadd-btn添加/button !-- 添加按钮 --/div
/templatescript
export default {data () {return {item: // 输入框绑定的数据}},methods: {send(){this.$emit(item,this.item) // 发出事件传递输入框数据}},
}
/scriptstyle scoped
.input-container { /* 输入框容器样式 */display: flex; /* flex 布局 */align-items: center; /* 垂直居中 */margin-bottom: 20px; /* 底部外边距 */
}.input-field { /* 输入框样式 */border: none; /* 取消边框 */border-bottom: 2px solid #aaa; /* 底部边框 */padding: 0.5rem; /* 内边距 */margin-right: 1rem; /* 右外边距 */font-size: 1rem; /* 字体大小 */font-family: Arial, sans-serif; /* 字体样式 */width: 300px; /* 宽度 */
}.add-btn { /* 添加按钮样式 */background-color: #20A3FF; /* 背景颜色 */border: none; /* 取消边框 */color: white; /* 字体颜色 */padding: 0.5rem; /* 内边距 */border-radius: 5px; /* 圆角 */cursor: pointer; /* 鼠标样式 */transition: all 0.3s ease; /* 过渡效果 */box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); /* 阴影 */
}.add-btn:hover { /* 鼠标悬停样式 */background-color: #2186e2;transform: translateY(-2px); /* 上移 */box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 增加阴影 */
}.input-field:focus { /* 输入框获得焦点时的样式 */outline: none; /* 取消选中时的边框 */border-bottom: 2px solid #2186e2; /* 底部边框颜色更改 */
}
/style输出效果
插槽 slot
新建子组件Slot.vue用vue生成格式后在HTML位置输入
templatedivh1我是插槽子组件/h1!-- 插槽位置 --slot/slot/div
/template在父组件App.vue中在相应位置进行导入、注册、使用可以新建一个项目看起来更直观
import Slot from /components/Slot.vue;components: {Slot},Sloth1你好/h1!-- 将会显示在子组件的Slot插槽位置上 --/Slot运行项目
多个插槽
通过名字区分
比如在子组件中再加一个slot标签加个名字
slot namea/slot在父组件中加上template v-slot:a Slot!-- 将会显示在子组件的Slot插槽位置上 --h1你好/h1!-- 通过名字单独指令子组件的Slot插槽位置 --template v-slot:ah2hello/h2/template/Slot另外在 css 位置加了点样式可以忽略
总结
组件化开发总结
Vue组件的基本组成
template——模版 html代码script——脚本 vue配置对象中的各种配置项style——样式 css代码
子组件使用的三个步骤
在父组件中导入所需子组件在父组件的配置对象中的components配置项中注册子组件在父组件的template中以标记的语法使用子组件
父子组件相互传递数据 父传子 a.在子组件配置对象中增加props配置项(自定义属性) b.在父组件使用子组件时通过自定义的属性名传数据 子传父 a.在父组件中增加自定义事件并编写接受数据的方法 【item“recive”】 b.在子组件中增加一个发送数据的方法调用this.$emit(‘自定义的事件名’,发送的数据) 那么如何在根组件中使用子组件呢 以App.vue根组件TabMenu.vue子组件为例
导入需要的子组件在script标签内
import TabMenu from /components/TabMenu.vue; //相当于src在components的配置项中注册子组件
components: {TabMenu},在template中以标记的语法使用子组件
TabMenu/TabMenu
