Vue:子组件如何跟父组件通信
我们知道,父组件使用 prop 传递数据给子组件。但子组件怎么跟父组件通信呢?这个时候 Vue 的自定义事件系统就派得上用场了。
使用 v-on
绑定自定义事件
每个 Vue 实例都实现了事件接口,即:
- 使用
$on(eventName)
监听事件 - 使用
$emit(eventName, optionalPayload)
触发事件
Vue 的事件系统与浏览器的 EventTarget API 有所不同。尽管它们运行起来类似,但是 $on
和 $emit
并不是addEventListener
和 dispatchEvent
的别名。
另外,父组件可以在使用子组件的地方直接用 v-on
来监听子组件触发的事件。
不能用 $on
监听子组件释放的事件,而必须在模板里直接用 v-on
绑定,参见下面的例子。
下面是一个例子:
<div id="counter-event-example"> |
Vue.component('button-counter', { |
0
0 0
<div id="example">
<greet @said = "say"></greet>
</div> Vue.component("greet", {
template: "<button @click='i_said'>点击我</button>",
methods:{
i_said(){
this.$emit("said", "Hello Vue!!")
}
}
})
new Vue({
el:"#example",
methods:{
say(message){
alert(message)
}
}
})
打开浏览器就会弹出来“Hello world”
子组件给父组件通信时可以添加参数,可以把子组件的属性传给父组件
Vue:子组件如何跟父组件通信的更多相关文章
- vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法
Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...
- Vue 父组件主动获取子组件的值,子组件主动获取父组件的值
父组件主动获取子组件的值 1. 在调用子组件的时候定义一个ref-> ref="header"2. 在父组件中通过this.$refs.header.属性,调用子组件的属性, ...
- vue中子组件的拆分 父组件与子组件之间的传值
vue是组件式开发,尽量独立出子组件 prop():父组件传值给子组件 $emit():子组件传值给父组件 子组件中的设置: 使用bind <template> : default-che ...
- vue父组件调用子组件方法、父组件向子组件传值、子组件向父组件传值
一.父组件调用子组件方法 父组件代码 parent.vue <template> <div> <button @click="parentFun" ...
- Vue中子组件数据跟着父组件改变和父组件数据跟着子组件改变的方法
一,子组件数据跟着父组件改变 父组件的代码 <template> <div class="home"> <img alt="Vue logo ...
- vue.js 父组件主动获取子组件的数据和方法、子组件主动获取父组件的数据和方法
父组件主动获取子组件的数据和方法 1.调用子组件的时候 定义一个ref <headerchild ref="headerChild"></headerchild& ...
- vue:子组件通过调用父组件的方法的方式传参
在本案例中,由于子组件通过调用父组件的方法的方式传参,从而实现修改父组件data中的对象,所以需要啊使用$forceUpdate()进行强制刷新 父组件: provide() { return { s ...
- vue2.0 子组件props接受父组件传递的值,能不能修改的问题整理
父组件代码: <!-- --> <template> <div class=''> <el-link type="danger">传 ...
- React子组件怎么改变父组件的state
React子组件怎么改变父组件的state 1.父组件 class Father extends React.Component { construtor(props){ super(props); ...
随机推荐
- ConversionService HttpMessageConverter
ConversionService是属于spring core部分 所有spring管理的bean等等 都使用它进行类型转换,而它又需要注册一些converter 来完成类型转换. 这个可以看我博客 ...
- 策略模式优化过多的IF ELSE
前言: 当if else的条件少的话,代码可阅读性及逻辑不影响阅读和扩展.一旦if else过多的话会导致逻辑比较混乱,不易扩展并且很容易出错. 实现方案: 1.定义一个@HandlerType注解, ...
- luogu P1047 校门外的树 x
P1047 校门外的树 题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0 ...
- [CF959A]Mahmoud and Ehab and the even-odd game题解
题意简述 一个数n,Mahmoud珂以取(即如果取\(k\),使\(n = n - k\))一个正偶数,Ehab珂以取一个正奇数,一个人如果不能取了(对于Mahmoud和Ehab \(n = 0\), ...
- Python_008(文件操作)
一.文件操作 1.只读操作 f = open("taibai.txt",mode = "r",encoding = "utf-8" s = ...
- Android 一键分享功能简单实现
import java.io.File;import java.util.ArrayList;import java.util.List; import android.content.Context ...
- Elasticsearch6.5安装&&常见问题与答案解释
ElasticSearch是一个用Java开发的基于Lucene的搜索服务器.它可以提供一个分布式多用户能力的全文搜索引擎,基于RESTfulweb接口.现阶段它主要为Apache许可条款下的开放源码 ...
- custom serializer for just one property in Json.NET
Json序列化的时候跳过加密字段 字段类定义如下 public class Field { public bool IsEncrypted { get; set; } public string Na ...
- Oracle DataGuard日志传输
1. 日志传输方式 有两种日志传输方式(ARC和LGWR),第一种是采用ARC进程传输日志,其示意图如下: 注:上图来自<大话Oracle RAC> 其大致过程如下: 1)主库:日志先写入 ...
- docker 保存镜像 加载镜像
1.保存镜像 docker save -o 保存的文件名 来源镜像 2.加载镜像 docker load -i 保存的文件名