Vue组件通信之子传父
子组件向父组件通信主要通过自定义事件实现。
这里我记录一个小例子来帮助自己记忆。
通过点击子组件的按钮去执行父组件的函数并使用子组件传来的数据。
子组件定义如下:
<template id="temp">
<div>
<button v-for="item in game" @click="itemclick(item)">{{item.name}}</button>
</div>
</template> const cpn={
template:'#temp',
data(){
return {
game:[
{id:,name:'英雄联盟'},
{id:,name:'地下城'},
{id:,name:'空洞骑士'},
{id:,name:'绝地求生'}
]
}
},
methods:{ }
}
这里我直接将vue实例作为了父组件：
const app = new Vue({
el:'#div1',
data:{
},
methods:{
},
components:{
cpn
}
})
由于程序简单，运行界面上只显示了几个按钮：
然后再为子组件添加函数：
itemclick(item){
// 使用$emit发射一个自定义事件，第一个参数是事件名称，第二个参数是默认传递参数
this.$emit('cpnclick',item)
}
从上面的模板可以看出这个函数再按钮点击时执行。在这个函数中，使用$emit方法发射了一个事件，事件名称为第一个参数：'cpnclick'，第二个参数为该事件触发时传递的默认参数。
然后，在使用组件的html代码中用v-on指令监听这个事件：
<div id="div1">
<!-- 此处v-on指令绑定的事件便是之前emit发射的自定义事件，后面执行的函数为父组件中的函数 -->
<cpn @cpnclick="Cpnclick"></cpn>
</div>
并在父组件中添加函数Cpnclick（注意这个C大写不是之前那个cpnclick）：
Cpnclick(item){
alert('接收到'+item.name)
}
在监听到事件时参数item会自动接受到前面传来的默认参数
运行效果：
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">
<!-- 此处v-on指令绑定的事件便是之前emit发射的自定义事件，后面执行的函数为父组件中的函数 -->
<cpn @cpnclick="Cpnclick"></cpn>
</div> <template id="temp">
<div>
<button v-for="item in game" @click="itemclick(item)">{{item.name}}</button>
</div>
</template>
<script src="vue.js"></script>
<script> const cpn={
template:'#temp',
data(){
return {
game:[
{id:1,name:'英雄联盟'},
{id:2,name:'地下城'},
{id:3,name:'空洞骑士'},
{id:4,name:'绝地求生'}
]
}
},
methods:{
itemclick(item){
// 使用$emit发射一个自定义事件，第一个参数是事件名称，第二个参数是默认传递参数
this.$emit('cpnclick',item)
}
}
} const app = new Vue({
el:'#div1',
data:{ },
methods:{
Cpnclick(item){
alert('接收到'+item.name)
}
},
components:{
cpn
}
})
</script>
</body>
</html>
Vue组件通信之子传父的更多相关文章
- Vue 组件通信（子组件向父组件传递数据）
1.自定义事件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="U ...
- 计算属性、侦听属性、局部与全局组件使用、组件通信(父子互传)、ref属性、动态组件和keep-alive、插槽
今日内容概要 计算属性 侦听属性 局部组件和全局组件 组件通信之父传子 组件通信之子传父 ref属性(组件间通信) 动态组件和keep-alive 插槽 内容详细 1.计算属性 # 插值的普通函数,只 ...
- vue 组件之间相互传值 父传子 子传父
1.父传子 把要传入的值放到父标签里 子组件使用props接收 父写法 子写法 2.子传父 子组件: childrenOnclick() { // 发布自定义事件 this.$emit(" ...
- Vue ---- 组价 组件化 子传父 父传子
目录 补充js的for循环: 组件 1.组件的分类: 2.组件的特点 3.创建局部组件 4.全局组件 二.组件化 一.组件传参父传子 二.组件传参:子传父 补充js的for循环: // for in遍 ...
- vue的组件通讯 父传子 -- 子传父-- 兄弟组件的传值 vue的组件传值
首先文字简单撸一下 父子传子 -------首先在父组件上绑定一个属性,在子组件里用props接收,可以是数组或者是对象 子传父 ------在父组件升上自定义一个方法,在子组件里通过this ...
- Vue父子组件传值 | 父传子 | 子传父
父传子 父容器 <template> <div> <zdy :module='test'></zdy> </div> </templa ...
- Vue-组件传值：子传父和兄弟组件间常见的传值方式
前言 上篇介绍了我对vue组件化的理解和父组件对子组件传值的方式,这篇介绍下常见的子传父和兄弟组件间的传值方式 目录 子组件向父组件传值 任意组件间的传值方式 正文 子组件向父组件传值 关键知识点:$ ...
- vue子传父、父传子
子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...
- vue传参子传父
vue子传父用$emit实现 1.文件目录结构 2.parent父组件内容 <template> <div class="wrap"> <div> ...
随机推荐
- 动手实现 LRU 算法，以及 Caffeine 和 Redis 中的缓存淘汰策略
我是风筝,公众号「古时的风筝」. 文章会收录在 JavaNewBee 中,更有 Java 后端知识图谱,从小白到大牛要走的路都在里面. 那天我在 LeetCode 上刷到一道 LRU 缓存机制的问题, ...
- tomcat内容总结
tomcat的安装以及配置环境变量 1.tomcat的官网下载地址:http://tomcat.apache.org/ tomcat有很多版本,有解压版 和 安装版,还分windows (还分为32位 ...
- 011.Nginx防盗链
一 盗链 1.1 盗链概述 盗链指的是在自己的界面展示非本服务器上的内容,通过技术手段获得其他服务器的资源.绕过他人资源展示页面,在自己页面向用户提供此内容,从而减轻自己服务器的负担,因为真实的空间和 ...
- Nginx/Httpd反代tomcat配置
在上一篇博客中,我们了解了tomcat的server.xml中各组件的用法和作用:其中对于tomcat连接器来说,它分三类,一类是http连接器,一类是https连接器,一类是ajp连接器:通常tom ...
- Jenkins链接Kubernetes集群
Jenkins CI/CD介绍 持续构建与发布是我们工作中必不可少的一个步骤,目前大多公司都采用Jenkins集群来搭建符合需求的CI/CD流程,然而传统的Jenkins Slave一主多从方式会存在 ...
- zabbix自定义监控(当会话登录超过三个就报警)
安装过程在此省略. 1.agent端去修改配置文件 2.调用自定义内容 vim /etc/zabbix/zabbix_agentd.d/login.conf UserParameter=login-u ...
- 题解 洛谷 P4695 【[PA2017]Banany】
考虑用动态点分治来解决像本题这样带修的树上路径问题. 首先对原树进行点分治,建出点分树,在点分树每个节点上用动态开点线段树来维护以该节点为起点,到其点分树子树中每个节点的利润. 查询时只需在点分树上当 ...
- 轻量级分布式延时任务处理组件easyTask-L-入门篇
今天给大家介绍一款新武器.我自研的一个java组件easyTask-L.这个是做啥的呢?我之前研发了一款单机版本的easyTask,这次是要介绍另外一款easyTask-L.区别就是后者支持分布式环境 ...
- etcd3.0集群安装
etcd 是一个分布式一致性键值存储,用于共享配置和服务发现,Go编写,并使用 Raft 一致性算法来管理高可用复制日志. 特性 简单:支持curl方式的用户API(http+json)安全:可选ss ...
- Day05_vue入门
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 学习目标 ...