这篇文章主要介绍了关于vue中父子组件间的通信，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。
一、运行环境搭建
Vue引入方式一般有三种：
第一种CDN引入
登录后复制
第二种使用 NPM 安装
立即学习“前端免费学习笔记（深入）”；
$ npm install vue//安装最新稳定版
登录后复制
第三种搭建脚手架CLI
所谓脚手架是通过webpack搭建的开发环境，用于快速搭建大型单页面应用程序。能够为现代前端开发的工作流程，带来持久强力的基础架构。只需几分钟，就可以建立并运行一个带有“热重载、保存时代码检查以及可直接用于生产环境的构建配置”的项目。
首先必须先安装node.js,Node.js 在 0.6.3 版本开始内建npm，所以安装好node.js后,npm也就装好。然后在通过git bash 操作以下命令行：
$ node -v//检查是否已经装好了node$ npm -v//检查是否已经装好了npm$ npm install --global vue-cli //安装 vue-cli$ vue init webpack project//进入目标文件夹创建一个新项目$ cd project//进入新项目$ npm install//安装package.json中依赖的node_modules$ npm run dev//运行该项目
登录后复制
对于大陆用户，建议将npm的注册表源设置为国内的镜像，可以大幅提升安装速度。推荐使用这种安装脚手架。
npm config set registry https://registry.npm.taobao.org//配置淘宝镜像npm config get registry//验证是否成功npm install -g cnpm --registry=https://registry.npm.taobao.org//安装cnpmcnpm install -g vue-cli//cnpm安装脚手架vue init webpack my-projectcd my-projectcnpm installcnpm run dev
登录后复制
最后打开http://localhost:8080，就出现下面的页面，标志着脚手架搭建完成了。![3631596858-5b462d796e21f_articlex[1].png](http://cdn.chuangxiangniao.com/2025/03/20250307084046301.png "https://cdn.chuangxiangniao.com/2025/03/20250307084046301.png")
![3631596858-5b462d796e21f_articlex[1].png](https://cdn.chuangxiangniao.com/2025/03/20250307084046301.png "https://cdn.chuangxiangniao.com/2025/03/20250307084046301.png")
二、介绍SRC文件流程及根组件App
脚手架搭建完成后，project里面各个文件夹及文件，如下图：![3476872098-5b462d79e3247_articlex[1].png](http://cdn.chuangxiangniao.com/2025/03/20250307164047685.png "https://cdn.chuangxiangniao.com/2025/03/20250307164047685.png")
![3476872098-5b462d79e3247_articlex[1].png](https://cdn.chuangxiangniao.com/2025/03/20250307164047685.png "https://cdn.chuangxiangniao.com/2025/03/20250307164047685.png")
1.src文件流程介绍
index.html(入口文件)=>main.js=>App.vue（根组件），根组件中模板内容就直接插入到入口文件中#app处，然后再将页面呈现出来。
2.根组件App介绍
主要由三部分组成，分别为模板（html结构），行为（处理逻辑）和样式（解决样式）
三、vue组件嵌套
vue组件嵌套是指写好的子组件如何与根组件取得关联，通常可以分为组件全局定义和组件局部定义，后者比较常见。
1.组件全局定义
一般以下两个步骤：
①main.js引入子组件
②App.vue组件中template调用
//main.jsimport Vue from 'vue'import App from './App'import Users from "./components/Users";//引入子组件UsersVue.config.productionTip = falseVue.component("users",Users);//自定义名字便于App.vue组件调用，后者为组件名new Vue({ el: '#app', components: { App }, template: ''})
登录后复制
//App.vue组件//在这里调用，自定义名字是小写的
登录后复制
2.组件局部定义
一般以下三个步骤：
①import引入子组件
②export default注册子组件
③template模板中加入子组件
![2894385749-5b462d79b924d_articlex[1].png](http://cdn.chuangxiangniao.com/2025/03/20250307164047107.png "https://cdn.chuangxiangniao.com/2025/03/20250307164047107.png")
![2894385749-5b462d79b924d_articlex[1].png](https://cdn.chuangxiangniao.com/2025/03/20250307164047107.png "https://cdn.chuangxiangniao.com/2025/03/20250307164047107.png")
四、父组件向子组件传值
接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:[“Henry”,”Bucky”,”Emily”]
1.创建子组件，在src/components/文件夹下新建一个Users.vue子组件
2.在App.vue中注册Users.vue组件，并在template中加入users标签
//App.vue父组件//前者自定义名称便于子组件调用，后者要传递数据名
import Users from "./components/Users"export default { name: 'App', data(){ return{ users:["Henry","Bucky","Emily"] } }, components:{ "users":Users }}
登录后复制
3.Users.vue的中创建props，然后创建一个users的属性
//users子组件
- {{user}} //遍历传递过来的值，然后呈现到页面
登录后复制
五、子组件向父组件传值（通过事件形式）
接下来我们通过一个例子，说明子组件如何向父组件传递值：
当我们点击“Vue.js Demo”后，子组件向父组件传递值，文字由原来的“传递的是一个值”变成“子向父组件传值”，实现子组件向父组件值的传递。
![1631286133-5b462d79b5ac0_articlex[1].png](http://cdn.chuangxiangniao.com/2025/03/20250307164052895.png "https://cdn.chuangxiangniao.com/2025/03/20250307164052895.png")
![1631286133-5b462d79b5ac0_articlex[1].png](https://cdn.chuangxiangniao.com/2025/03/20250307164052895.png "https://cdn.chuangxiangniao.com/2025/03/20250307164052895.png")
1.在子组件（header组件）中文字部分绑定一个点击事件
{{title}}
//绑定一个点击事件
登录后复制
2.子组件中响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数
export default { name: 'app-header', data() { return { title:"Vue.js Demo" } }, methods:{ changeTitle() { this.$emit("titleChanged","子向父组件传值");//自定义事件 传递值“子向父组件传值” } }}
登录后复制
3.在父组件（App根组件）中的子标签中监听该自定义事件并添加一个响应该事件的处理方法
//与子组件titleChanged自定义事件保持一致，updateTitle($event)接受传递过来的文字
{{title}}
import Header from "./components/Header"export default { name: 'App', data(){ return{ title:"传递的是一个值" } }, methods:{ updateTitle(e){ //声明这个函数 this.title = e; } }, components:{ "app-header":Header, }}
登录后复制
六、总结
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是都有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
使用c+v让vue返回顶部组件
以上就是Vue中父子组件间的通信的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2636285.html
