Vue子组件与父组件之间的通信

fredshare 发布于2019-08-23 10:43 / 3457人阅读

摘要：子组件通过就可以接受到这个父组件传递的值。点击向父组件传值在父组件中的标签中监听该自定义事件，并添加一个响应该事件的方法。

1.环境搭建

下载 vue-cli：npm install -g vue-cli

初始化项目：vue init webpack vue-demo

进入vue-demo文件夹：cd vue-demo

下载安装依赖：npm install

运行该项目：npm run dev

2.父组件向子组件传值

src/components/文件夹下建一个组件，Home.vue

创建子组件，在src/components/文件夹下新建一个文件夹，在新建文件夹中新建一个组件Child.vue

在Child.vue中创建props，用于接收父组件传递的值

在Home.vue中注册Child组件，并在template的div标签中添加home-child标签，标签中使用v-bind指令绑定c。子组件通过props就可以接受到这个父组件传递的值。

结果

3.子组件向父组件传值

给按钮绑定点击事件ChildClick
在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

在父组件中的home-child标签中监听该自定义事件，并添加一个响应该事件的方法ShowChild。

结果：

点击按钮后：

GPU云服务器云服务器组件之间通信 vue组件子组件 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96615.html

Vue子组件与父组件之间的通信

摘要：子组件通过就可以接受到这个父组件传递的值。点击向父组件传值在父组件中的标签中监听该自定义事件，并添加一个响应该事件的方法。 1.环境搭建下载 vue-cli：npm install -g vue-cli 初始化项目：vue init webpack vue-demo 进入vue-demo文件夹：cd vue-demo 下载安装依赖：npm install 运行该项目：npm...

fish 2019-08-02 11:09 评论0 收藏0
vue父子组件间通信

摘要：为此可以使用为子组件指定一个索引。访问子组件当和一起使用时，是一个数组或对象，包含相应的子组件。父子通信目前有四种方式： 1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件： //这里必须要用 - 代替驼峰data(){ return { msg: [1,2,3] };} 子组件通过props来接收数据:方式1：props: [childMs...

617035918 2019-08-23 11:51 评论0 收藏0
在vue-cli中组件通信

摘要：一父传子组件通信拿当父组件，当子组件父组件中导入子组件子组件导出在父组件中注册子组件子组件通过来接收数据二子与父组件通信子组件主动触发方法，为向父组件传递的数据父组件监听子组件触发的事件然后调用方法二非父子组件通信把当作一个中转站组一.父传子组件通信 showImg(https://segmentfault.com/img/bV0l1v?w=168&h=134); 拿app.vue当...

cgspine 2019-08-22 11:18 评论0 收藏0
Vue.js 父子组件及非父子组件间实现通信

摘要：想使用值的话通过进行处理非父子组件间通信创建事件中心组件触发组件接收 1. 父组件与子组件通信父组件showImg(https://segmentfault.com/img/remote/1460000013945460); 子组件通过props来接收数据: 格式1： props: [childMsg] 格式2 : props: { childMsg: Array //指定...

lentrue 2019-08-22 15:40 评论0 收藏0
前端知识点总结——VUE（持续更新中）

摘要：前端知识点总结持续更新中框架和库的区别框架有着自己的语法特点都有对应的各个模块库专注于一点框架的好处提到代码的质量，开发速度提高代码的复用率降低模块之间的耦合度高内聚低耦合思维模式的转换从操作的思维模式切换到以数据为主概述是一个渐进式的构建前端知识点总结——VUE（持续更新中） 1.框架和库的区别：框架：framework 有着自己的语法特点、都有对应的各个模块库 library ...

big_cat 2019-08-22 14:50 评论0 收藏0