【vue】vue组件的自定义事件
父组件:
<template>
<div>
<my-child abcClick="sayHello"></my-child>
</div>
</template> <script>
export default {
method: {
sayHello(Num,Str) {
alert('hello world~~' + Num + Str)
}
}
}
</script>
子组件:
<template>
<div>
<!--例如最简单的封装一个按钮-->
<button @click="childClick"></button>
</div>
</template> <script>
export default {
data: {
return{
myNum: 456,
myStr: 'haha'
}
},
method: {
childClick() {
this.$emit('abcClick', this.myNum, this.myStr)
}
}
}
</script>
核心就是通过$emit来触发自定义事件(不需要注册),并且传值出去
【vue】vue组件的自定义事件的更多相关文章
- vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- Vue组件绑定自定义事件
Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...
- Vue中调用另一个组件中自定义事件
之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...
- vue -- 父子组件间的事件触发
1.父组件触发子组件事件 Parent.vue <child ref="child"></child> <div @click="fn&qu ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- vue 给组件绑定原生事件
有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native.例如: <my-component v-on:click.native="doThe ...
- 子组件通过 $emit 触发父组件的自定义事件
子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...
随机推荐
- 关于LP64,ILP64,LLP64,ILP32,LP32字长(数据)模型
太长不看: 1.32位Windows和类Unix使用ILP32字长模型,64位Windows使用ILP64模型,64位类Unix使用LP64字长模型. 2.根据1,long在32位和64位Window ...
- 001---mysql
Mysql数据库 数据库相关概念 数据库服务器:运行数据管理软件的计算机 数据库:顾名思义数据仓库,是一个文件夹.存储多个文件(数据表) 数据表:对应一个文件,存储在数据库下 数据:对应文件中的每一行 ...
- UCSC 工具链接
http://hgdownload.cse.ucsc.edu/admin/exe/linux.x86_64/
- 138. Subarray Sum【Lintcode,by java】
Description Given an integer array, find a subarray where the sum of numbers is zero. Your code shou ...
- python3出现转码问题的总结
对于此(类)问题: (1)出现UnicodeEncodeError –> 说明是Unicode编码时候的问题: (2) ‘gbk’ codec can’t encode character –& ...
- Repo 的使用小结
一.安装 创建目录和修改环境变量 $ mkdir ~/bin $ PATH=~/bin:$PATH 下载repo代码 $ curl https://storage.googleapis.com/git ...
- 跨域发送HTTP请求详解
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述几种跨域发HTTP请求的几种方法,POST请求,GET请求 目录: 一,采用JsonP的方式(只能 ...
- StringUtils工具类用法
/*1.字符串以prefix开始*/ StringUtils.startsWith("sssdf","");//结果是:true StringUtils.sta ...
- nuget必备插件(待续)
DevLib.ExtensionMethods Extend Z.ExtensionMethods
- 用树莓派Raspberry Pi和Micro:bit做一个自拍器
在这个项目中,我们将使用Python来构建一个由Micro:bit触发树莓派Raspberry Pi和相机模块的自拍器.这是开始使用硬件和简单文本编程的好方法. 我们将学习: 如何设置Raspberr ...