vue、uni-app组件封装引入及父子组件传值（保姆级教程）

提示：我把这个技能分成了三个知识点 小伙伴们量力而学 可以随心情慢慢的学慢慢掌握都是可以的

文章目录 【知识点一】新建项目和页面并建立父级页面与子组件的关系1、新建一个uniapp的空白项目2、把项目运行起来3、新建vue页面做为子组件1.在index.vue同级新建一个vue页面做为子组件名称也是自定义你开心就好。我们这里就叫它child.vue吧 并在chid.vue页面写点文字吧 4、建立页面的父子关系1.我们这里将index.vue当作父级页面 将child.vue 当作子组件2.我们要在父级页面（index.vue)当中将子级页面(child.vue)当做组件引入进来3.根据我的1 2 3 步动起来了 看你能不能成功4.这里要注意的是 父子关系 使用import的页面就是父页面 被引入的页面就是子页面 你学废了吗？ 【知识点二】父级页面向子级页面传值四步走1. 我们的父子页面的代码都要做细微的调整 首页我们要在index.vue当中定义一下变量 就叫food吧 给它赋值为 “猪角饭”2. 在index.vue的子组件的代码上我们要增加个入口的变量（自定义的） 我们这里就叫 name吧 至此父级页面的传递工作就全部完成了 接下来就是去子组件当中去接收值并展示出来吧。3. 在child.vue页面进行一个值的接收工作 当然我们接收的变量在index.vue页面定义的叫name 所以我们在子组件当中也要用name这个名字才能接收到 值得注意的是我们要给这个name 加上一层 props （与data()同级)4. 将接收的值放在页面中进行展示 当然我们要用{{name}} 来展示知识点二总结 【知识点三】子级页面如何给父级页面传值1.在子组件当中我们来写一个onclick事件 这个事件只做一件事就是触发$emit()方法向父级页面传值2.在父级页面接收子组件用$emit()传递过来的方法和值知识点三的总结

---

【知识点一】新建项目和页面并建立父级页面与子组件的关系

文章的初衷

最近有一些刚刚接触uniapp的小伙伴在项目开发的过程中不会使用以组件的形式进行页面开发 导致页面代码过多 不易读等特点 所以为了让我们的页面代码更加的简洁 美观 易读 建议小伙伴们可以学习这一堂课 相信一定会对有需求的你有所帮助 我们一起加油

---

大家可以跟着图文一点点练习

1、新建一个uniapp的空白项目

2、把项目运行起来

以下是常用的三种运行项目的方式 我们这里用第一种运行到谷歌浏览器
运行起来以后看上去会很大 但我们选择F12键 打开控制台 点亮手机标志 进入页面调试模式 也可以在浏览器上右键选择 检查 就会打开控制台

这个手机的小图标点击一下就亮了

然后你就会看到类似于手机大小的页面了这样看起来是不是舒服多了。

3、新建vue页面做为子组件 1.在index.vue同级新建一个vue页面做为子组件名称也是自定义你开心就好。我们这里就叫它child.vue吧 并在chid.vue页面写点文字吧

值得注意的是要把鼠标放在index文件夹上面点击右键才能新建一个vue的文件


child.vue里面 写一点内容

4、建立页面的父子关系 1.我们这里将index.vue当作父级页面 将child.vue 当作子组件 2.我们要在父级页面（index.vue)当中将子级页面(child.vue)当做组件引入进来 3.根据我的1 2 3 步动起来了 看你能不能成功 4.这里要注意的是 父子关系 使用import的页面就是父页面 被引入的页面就是子页面 你学废了吗？

改成上面的样子 然后ctrl+s保存（mac 按command+s）就可以保存看效果了

【知识点二】父级页面向子级页面传值四步走

核心知识点：子组件要用到props 这个方法来接收父组件的值
我们在index.vue页面想传一个值(就传 “猪角饭” 这三个字吧）到子组件（child.vue)当中并进行展示

1. 我们的父子页面的代码都要做细微的调整 首页我们要在index.vue当中定义一下变量 就叫food吧 给它赋值为 “猪角饭”

2. 在index.vue的子组件的代码上我们要增加个入口的变量（自定义的） 我们这里就叫 name吧 至此父级页面的传递工作就全部完成了 接下来就是去子组件当中去接收值并展示出来吧。

3. 在child.vue页面进行一个值的接收工作 当然我们接收的变量在index.vue页面定义的叫name 所以我们在子组件当中也要用name这个名字才能接收到 值得注意的是我们要给这个name 加上一层 props （与data()同级) 4. 将接收的值放在页面中进行展示 当然我们要用{{name}} 来展示

到这一步 父级值就成功的传递给了子组件并展示成功了。

知识点二总结

传递过程一共可以理解为四个步骤
index.vue页面（父级页面做了什么？）
1.是 food =‘猪角饭’
2.然后给了 name这个变量
child.vue页面（子组件页面做了什么？）
3.定义了一个name变量用于接收父页面传的值
4.把name变量放在页面上展示

【知识点三】子级页面如何给父级页面传值

核心知识点：这里我们要用到$emit(‘第一个参数父组件接收事件自定义方法名称--此处必填’，’第二个参数：就是传递给父页面的的值--可填可不填‘) 子组件只要触发这个方法就可以父级传值

1.在子组件当中我们来写一个onclick事件 这个事件只做一件事就是触发$emit()方法向父级页面传值

2.在父级页面接收子组件用$emit()传递过来的方法和值

我们来看一下效果。

知识点三的总结

关于this.$emit()方法有两种情况的写法一种是不传值的情况一种是传值的情况。
那么不传值的话就这样写。

this.$emit('back') //不传值的写法 这样只是单独的触发父级页面@back=后面的方法 value是没有值的
如果是传值的话 就要下面的写法

this.$emit('back','你中奖了') //传值的写法 这样写即触发父级页面@back=后面的方法 value形参也是有值的 值为你中奖了

这里都是最简单的示例 更多的小技巧 还需要小伙伴们根据实际开发需要进行变通。
如果还有哪里不懂 可以@我 我再给大家写出来。谢谢小伙伴们的鼓励和支持 我们一起努力。