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:1,b:2});}}});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 父链和子组件索引_解决Vue2.x父组件与子组件之间的双向绑定问题
最近在研究如何写一套基于Vue2.x的UI组件给自己用,提升一点BIG,在制作含有input的组件遇到一个问题:不知怎样才能把子组件中input与调用者(父组件)的数据实现双向绑定,想过使用Vuex, ...
vue 父链和子组件索引_vuejs填坑-父子组件之间的访问
有时候我们需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 1. 父组件访问子组件 $children或$ref $children 返回所有子组件的实例,是一个数组显示两个组件的信 ...
vue 父链和子组件索引_vue子组件和父组件双向绑定的几种方案
v-model案例模仿v-model实现案例我是一串要和内部名字联动的一串文字(父组件) 父组件改变值带动(父组件)点一下试试 .sync方案实现案例这是父组件的东西.利用这个框改变值,看看有没 ...
vue 父链和子组件索引_Vue.js 学习笔记第7章组件详解
组件(Component)是Vue.js最核心的功能,也是整个框架设计最精彩的地方,当然也是最难掌握的. 本章将带领你由浅入深地学习组件的全部内容,并通过几个实战项目熟练使用Vue组件. 7.1 组件 ...
Vue父组件和子组件之间传递数据
Vue父组件和子组件之间传递数据 klmhly 已关注 2018.05.19 19:56* 字数 367 阅读 23评论 0喜欢 0 一.概念解析挂载点: Vue实例的el属性对应的id,vue只会 ...
【Vue 组件化开发三】父组件给子组件传递数据、组件通信（父传子、子传父）、父访问子（children、ref）、动态组件（is、component）
目录一.前言完整内容请关注: 二.父组件给子组件传递数据 1.使用props属性,父组件向子组件传递数据 1.使用组件的props属性 2.向cmessage对象传值 2. props属性使用 1 ...
VUE父组件向子组件传递数据
在使用VUE开发的时候,有时候,我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生,从而导致代码冗余,所以,我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理 ...
042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
vue 传递多行数据_vue父组件向子组件传递多个数据的实例
在平时我们使用VUE组件的时候,经常需要将父组件的某些数据传递给子组件,这个时候,我们通常会有很多的办法,这里主要分为两种情况: 第一种:静态数据传递:传递一个字符串第二种:动态数据传递:绑定一个 ...

Vue父组件与子组件传递事件/调用事件

Vue父组件与子组件传递事件/调用事件相关推荐

最新文章

热门文章