Vue父组件与子组件传递事件/调用事件
1、Vue父组件向子组件传递事件/调用事件
<div id="app">
<hello list="list" ref="child"></hello>
<br />
<button v-on:click="myclick">调用子组件中的方法</button>
</div>
<template id="myT"></template> <script>
Vue.component('hello', {
template: '#myT',
methods: {
clickme: function () {
alert("dd");
}
}
});
var app=new Vue({
el: '#app', methods: {
myclick: function () {
this.$refs.child.clickme();
}
}
});
</script>
如果传递参数,可以使用 props数据
2.子组件调用父组件事件
<div id="app">
<hello list="list" v-on:wzhclick="wzhclick"></hello>
</div>
<template id="myT">
<button v-on:click="childclick">调用父组件的方法</button>
</template>
<script>
Vue.component('hello', {
template: '#myT',
methods: {
childclick: function () {
this.$emit('wzhclick', {a:,b:});
}
}
});
var app=new Vue({
el: '#app',
methods: {
wzhclick: function (data) {
alert("我是父组件,参数"+data.a+";"+data.b);
},
}
});
</script>
子组件通过this.$emit()派发事件,父组件利用v-on对事件进行监听,实现参数的传递
3.两平等组件间的调用
@{
ViewBag.Title = "Index";
}
<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/vue.min.js"> </script>
<script src="~/Scripts/axios.min.js"></script>
<style> </style> <div id="app">
<wzh></wzh>
<zl></zl>
</div>
<script>
var Event = new Vue();//事件调度器
Vue.component('wzh', {
template: '<div>wzh:<input v-on:keyup="isay" v-model="msg">{{msg}}</div>',
data: function () {
return {
msg:''
}
},
methods: {
isay: function () {
Event.$emit("wzhsay", this.msg);
}
} });
Vue.component('zl', {
template:'<div>wzh说了:{{wzhmsg}}</div>',
data: function () {
return {
wzhmsg:'',
}
},
mounted: function () {
var me = this;
Event.$on("wzhsay", function (data) {
me.wzhmsg = data;
});
}
});
var app=new Vue({
el: '#app',
});
</script>
new一个调度器来Event来完成,在mounted中监听事件,另一个组件中调用Event.$emit来调用此事件完成调度。
Vue父组件调用子组件事件
vue组件之间的通信以及如何在父组件中调用子组件的方法和属性
Vue父组件与子组件传递事件/调用事件的更多相关文章
- vue父页面给子页面传递数据
父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' : ...
- vue 父组件向子组件传递事件/调用事件
方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(functio ...
- Vue父组件向子组件传递方法(自定义方法)并且子组件向父组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 父组件往子组件传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
原文:https://blog.csdn.net/zhouweixue_vivi/article/details/78550738 2017年11月16日 14:22:50 zhouweixue_vi ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue父组件与子组件之间的数据传递
父组件向子组件传递数据 父组件用数据绑定:子组件用props接收 <!-- test-vue-model父组件 --> <template> <div> <m ...
随机推荐
- 2015521 实验四 Android程序设计
<JAVA程序设计> 20155214 实验四 Android程序设计 实验内容 基于Android Studio开发简单的Android应用并部署测试; 了解Android.组件.布局管 ...
- 20155223 2016-2017-2 《Java程序设计》第10周学习总结
20155223 2016-2017-2 <Java程序设计>第10周学习总结 教材学习内容总结 Java Socket编程 网络上的两个程序通过一个双向的通讯连接实现数据的交换,这个双向 ...
- 20155227 《Java程序设计》实验四 Android开发基础设计实验报告
20155227 <Java程序设计>实验四 Android开发基础设计实验报告 任务一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二 ...
- Android Sdk Manager更新
现在Android Sdk Manager无法更新了,什么原因大家都知道,即使使用Goagent效果也不理想. 目前Goagent使用的3.2.2 修改C:\Windows\System32\driv ...
- Nginx入门篇(五)之LNMP环境应用
一.LNMP组合工作原理 (1)用户通过浏览器输入域名请求Nginx web服务: (2)Nginx对请求的资源进行判断,如果是静态资源,则由Nginx返回给用户:如果是动态请求(.php文件),那么 ...
- hive 数据导入
Hive的几种常见的数据导入方式这里介绍四种:(1).从本地文件系统中导入数据到Hive表:(2).从HDFS上导入数据到Hive表:(3).从别的表中查询出相应的数据并导入到Hive表中:(4).在 ...
- 提取oracle awr报告
做性能测试时有时需要分析sql的执行情况,以找出需要优化的sql,oracle数据库就提供了很好的数据库状态和sql执行情况的监控平台,数据库的监控平台可以时时的监控数据库的状态,同时还可以取监控的时 ...
- 通过dotnet命令行设置asp.net core服务的启动地址
需求: 通过dotnet命令行启动asp.net core 服务时,自定义监听端口. 方法: 在program.cs中增加命令行参数配置: WebHost.CreateDefaultBuilder(a ...
- Android开发笔记——以Volley图片加载、缓存、请求及展示为例理解Volley架构设计
Volley是由Google开源的.用于Android平台上的网络通信库.Volley通过优化Android的网络请求流程,形成了以Request-RequestQueue-Response为主线的网 ...
- java计算两个日期之间的天数,排除节假日和周末
如题所说,计算两个日期之前的天数,排除节假日和周末.这里天数的类型为double,因为该功能实现的是请假天数的计算,有请一上午假的为0.5天. 不够很坑的是每个日期都要查询数据库,感觉很浪费时间. 原 ...