Vue-$emit的用法
1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。
vm.$emit( event, arg ) //触发当前实例上的事件
vm.$on( event, fn );//监听event事件后运行 fn;
子组件
<template>
<div class="train-city">
<h3>父组件传给子组件的toCity:{{sendData}}</h3>
<br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button>
</div>
</template>
<script>
export default {
name:'trainCity',
props:['sendData'], // 用来接收父组件传给子组件的数据
methods:{
select(val) {
let data = {
cityname: val
};
this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件
}
}
}
</script>
父组件:
<template>
<div>父组件的toCity{{toCity}}</div>
<train-city @showCityName="updateCity" :sendData="toCity"></train-city>
<template>
<script>
import TrainCity from "./train-city";
export default {
name:'index',
components: {TrainCity},
data () {
return {
toCity:"北京"
}
},
methods:{
updateCity(data){//触发子组件城市选择-选择城市的事件
this.toCity = data.cityname;//改变了父组件的值
console.log('toCity:'+this.toCity)
}
}
}
</script>
Vue-$emit的用法的更多相关文章
- vue中 关于$emit的用法
1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( ev ...
- socket.io emit 常见用法
io.on('connect', onConnect); function onConnect(socket){ // 只发给sender. sending to the client socket. ...
- Vue你不知到的$this.emit()的用法
需求 需求:除了拿到false,还要拿到v-for中的index 如何解决:再使用一次父传子,:a="index" 将下标值传递给子组件 注意要加引号 <expert ...
- $emit的用法
自定义事件$emit.使用$emit建立父子组件之间的通信.子组件到父组件之间的通信. 子组件: 父组件:
- socket.io emit callback调用探秘
socket.io https://socket.io/ https://socket.io/docs/ What Socket.IO is Socket.IO is a library that e ...
- VueJs(4)---V-model指令
V-model指令 摘要 限制: v-model只能用在:<input> <select> <textarea> <components&g ...
- VueJs(9)---组件(父子通讯)
组件(父子通讯) 一.概括 在一个组件内定义另一个组件,称之为父子组件. 但是要注意的是:1.子组件只能在父组件内部使用(写在父组件tempalte中); 2.默认情况下,子组件无法访问父组件上的数据 ...
- vue和mpvue
一.mixins的理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况 ...
- 从壹开始 [Admin] 之五 ║ 实现『按钮』级别权限配置
一.前情回顾 哈喽大家好,在这个欢庆的日子里,老张祝大家工作都能蒸蒸日上!今天正好也是社团成立的第一天,我也是希望今天能是个纪念日,沾沾这个大喜庆! 放假这两天,倒是学到了很多东西,我这个也是承认的, ...
- 从零开始的vue学习笔记(三)
事件处理 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码,示例: <div id="example-2"> <!-- `gree ...
随机推荐
- Extensions disabled by Chrome
Extensions disabled by Chrome https://support.google.com/chrome_webstore/answer/2811969 https://supp ...
- bzoj1086-王室联邦
题目 给出一棵树,求一种分块方案,使得每个块的大小\(size\in [B,3B]\).每个块还要选一个省会,省会可以在块外,但是省会到块内任何一个点路径上的所有除了省会的点都必须属于这个块.\(n\ ...
- echart模块化单文件引入
echart模块化单文件引入百度上面是推荐这样使用.今天看了一下,做了个Demo. 文件结构如下:
- linux文件服务器:samba服务器
windows上,需要和linux虚拟机进行方便的文件交互,总结一下遇到的问题. 1.samba简介 windows和windows之间共享文件可以用“网上邻居”,linux和linux间共享文件用 ...
- hdu 3339 In Action (最短路径+01背包)
In Action Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total S ...
- zoj 1298 Domino Effect (最短路径)
Domino Effect Time Limit: 2 Seconds Memory Limit: 65536 KB Did you know that you can use domino ...
- CentOS 文件及目录等
1.在linux中一切皆是文件,只是类型不同,通过ls -l看到的一个字母表示文件的类型 -:普通文件. d:目录文件. l:链接文件. b:块设备文件. c:字符设备文件. p:管道文件. 2.文件 ...
- Springboot @Transactional 事务不回滚
一.异常捕获的原因 这里Exception异常,他又分为运行时异常RuntimeException和非运行时异常 可查的异常(checked exceptions):Exception下除了Runti ...
- 在linux服务器上搭建相对安全的FTP服务器
一.如何在Linux服务器上安装vsftp不在多说,直接介绍如何进行安全性配置: 二.编辑vsftp.conf文件 关键配置项如下: anonymous_enable=NO /禁止匿名用户登录 loc ...
- 从零开始学Linux系统(五)用户管理和权限管理
权限管理: 常识: chmod U-所有者 g-所属组 O-其他人r-4-可读 w-2-可写 x-1-可执行 s-4-SetUID s-2-SetGID t-1-粘着位 注:目 ...