vuejs父子组件事件监听_Vuejs中vm$on有什么实际意义怎么使用文档里的监听又是什么意思呢

Ⅰ 使用Vue父子组件通信实现todolist的功能示例代码

先上代码
<body>
<div
id="root">
<div>
<input
v-model="inputValue"
/让友>
<button
@click="handleClick">submit</button>
</div>
<ul>
<todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
<script>
Vue.component("todolist",{
props:
['content','index'],
template:
'<li
@click="handleDelete">{{content}}</li>',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
</script>
</body>
创建todolist的基本结构
<div
id="root">
<div>
<input
v-model="inputValue"
/>
<button
@click="handleClick">submit</button>
</div>
<ul>
<todolist
v-for="(item,index)
of
list"
:key="index"
:content="item"
:index="index"
@delete="handle"
></todolist>
</ul>
</div>
在这里我们创建了一个todolist标签作为父组件，让它在里面循环遍历list作为我们的输出，同伍滑判时定义了一个delete的监听事件。
接下来在script标签里定义子组件
Vue.component("todolist",{
props:
['content','index'],
template:
'<li
@click="handleDelete">{{content}}</li>',
methods:
{
handleDelete:function(){
this.$emit('delete',this.index)
}
}
})
定义了一个全局类型的子组件，子组件的props选项能够接收来自父组件数据，props只能单向传递，即只能通过父组件腔改向子组件传递，这里将上面父组件的content和index传递下来。
将li标签作为子组件的模板，添加监听事件handleDelete用与点击li标签进行删除。
在下面定义子组件的handleDelete方法，用this.$emit向父组件实现通信，这里传入了一个delete的event，参数是index，父组件通过@delete监听并接收参数
接下来是Vue实例
new
Vue({
el:"#root",
data:
{
inputValue:'',
list:[]
},
methods:
{
handleClick:function(){
this.list.push(this.inputValue)
this.inputValue=''
},
handle:function(index){
this.list.splice(index,1)
}
}
})
handleClick方法实现每次点击submit按钮时向list里添加值，在每次添加之后将输入框清空。
而handle方法则是点击删除li标签，这里通过接受传入的index参数来判断点击的是哪一个li
这是删除前：
这是删除后：
总结：
通过点击子组件的li实现向外触发一个delete事件，而父组件监听了子组件的delete事件，执行父组件的handle方法，从而删除掉对应index的列表项，todolist中的list对应项也会被删除掉。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:Vue中父子组件通讯之todolist组件功能开发Vue从TodoList中学父子组件通信详解Vue的computed(计算属性)使用实例之TodoListvue实现ToDoList简单实例利用vue写todolist单页应用vue组件编写之todolist组件实例详解vue2的todolist入门小项目的详细解析使用Vue完成一个简单的todolist的方法Vue.js实现简单ToDoList
前期准备（一）vue实现留言板todolist功能

Ⅱ Vue.js中vm.$on有什么实际意义怎么使用文档里的监听又是什么意思呢

```js

//创建vue实例。

varvm=newVue()

//创建事件监听@params监听的事件名回调函数。

vm.$on('start',function(params){

console.log(params+'，我让start事件触发了');

})

//主动触发事件，此时会触发监听的回调(我们打印的代码就会运行)@params触发的事件名传递的参数。

vm.$emit('start','我是触发传递的参数')

```

Vue的$on就和addEventListener差不多，是创建一个事件监听,
$emit 就和自定义事件一样，你主动创建了一个事件，并且让这个事件触发了。
一般用来vue非父子组件之间传递数据(Vue的bus)

Ⅲ Vue-Cli—04.父子组件传值|祖孙组件传值|兄弟组件传值

父组件向子组件传值，可以通过绑定属性传值；子组件通过props接收父组件传值。
父组件：

子组件：

子组件通过$emit触发一个自定义事件，将更新的数据传给父组件。
子组件：

父组件：

首先祖先给子孙后代传值也是可以用props传递，一层层传递，如果嵌套了五六层，这种方法就显得很繁琐。
所以就用到了provide(提供)和inject(注入)。这两个是配套使用的，以允许祖先向所有祖先后代注入一个依赖。祖先组件通过provide添加依赖数据，它里面定义的数据，后代组件可以通过inject选择性注入并直接使用。
注意： 后代组件通过inject注入祖级组件中的依赖数据，跟props一样，接收的数据是只读的，不能修改。

祖先组件：

后代组件：

在Vue的原型对象上，添加一个 $bus属性 ，该属性的的属性值是一个Vue实例。Vue的所有实例，都将共用同一个$bus。这个$bus属性，称之为：中央事件总线。
vm.$emit( eventName, […args] )： 触发当前实例上的事件。附加参数都会传给监听器回调。
vm.$on( event, callback )： 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
vm.$once( event, callback )： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
vm.$off( [event, callback] )： 移除自定义事件监听器。

main.js文件：

兄弟A鸽子组件：
点击鸽子组件中的‘修改乌鸦数据’按钮，可以修改乌鸦组件页面的数据。

兄弟B乌鸦组件：

Ⅳ vue 组件通信方式，父子、隔代、兄弟三类通信，六种方法

Vue 组件间通信只要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信，下面分别介绍每种通信方式且会说明此种方法可适用于哪类组件间通信。

父组件注入，子组件接收。
这种方法是 Vue 组件的基础，相信大部分同学耳闻能详，所以此处就不举例展开介绍。

ref ：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
$parent / $children ：访问父 / 子实例

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners ：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入笑梁内部组件

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

vuex的详细使用方法： vuex管理状态仓库使用详解

a.vue 引用了一个detail组件

第一步：首先需要创建事件总线并将其导出，以便其它模块可以使用或者监听它。

两个初始化事件中心的方法：

第二步：创建了 EventBus ，接下来你需要做到的就是在你的组件中加载它，并且调用同一个方法，就如你在父子组件中互相传递消息一样。

假设你有两个Vue页面需要通信： A 和 B ，A页面在按钮上面绑定了点击事件，发送一则消息，想通知 B页面。

接下来，我们需要在 B页面中接收这则消息。

同理我们也可以在 B页面向 A页面发送消息。这里主要用到的两个方法：

如果使用不善，EventBus会是一种灾难，到底是什么样的“灾难”了？大家都知道vue是单页应用，如果你在某一个页面刷新了之后，与之相关的EventBus会被移除，这样就导致业务走不下去。还要就是如果业务有反复操作的页面，EventBus在监听的时候就会触发很多次，也是一个非常大的隐患。这时候我们就需要好好处理EventBus在项目中的关系。通常会用到，在vue页面销毁时，同时移除EventBus事件监听。
如果想移除事件的监听，可以像下面这样操作：

$on 事件是不会自动清楚销毁的，需要我们手动来销毁，否则在b组件每次加载一次就会创建一个监听，会重复监听到数据。
可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。
或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数。

因为页面跳转的时候，a页面在之前已基首经emit了，但是b页面首次并没有created，b页面还监听不到。
可以把A页面组件中的emit事件写在beforeDestory中去。因为这个时候，B页面组件已经被created了，也就是我们写的$on事件已经可以搏升数触发了

所以可以，在beforeDestory的时候，$emit事件。例如：

【参考eventbus实战记录： https://www.jianshu.com/p/fde85549e3b0 】

Ⅳ vue 事件总线EventBus的概念、使用

两个组件之间毫无关系，用到 vue 中的羡野告事件总线 EventBus的概念来传递数据

EventBus又称事件总线，相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件

因为是全局的一个'仓库'，所以初始化要在全局初始化(main.js)

有两个组件A和B需要通信，他兄明们不是父子组件关系，B事件需要获得A事件里的一组数据data

A组件已经向全局事件总线EventBus发送了一个aMsg事件，这时B组件就可以去aMsg监听这个事件，并可以获得一些数据脊哗。

原文链接： https://blog.csdn.net/starzhou/article/details/119793562

Ⅵ vue单文件组件通常是如何调用实例方法的

Vue父组件向子组件传递事件/调用事件
不是传递数据（props）哦，适用于 Vue 2.0
方法一：子组件监听父组件发送的方法
方法二：父组件调用子组件方法
子组件：
export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }， methods { callMethod () { console.log('调用成功') } } }
父组件：
<child ref="child" @click="click"></child> export default { methods: { click () { this.$refs.child.$emit('childMethod') // 方法1 this.$refs.child.callMethod() // 方法2 }, components: { child: child } }
以上这篇Vue父组件调用子组件事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:VUEJS 2.0 子组件访问/调用父组件的实例vue.js中父组件调用子组件的内部方法示例ES6下子组件调用父组件的方法(推荐)

Ⅶ vue中$refs, $emit, $on, $once, $off的使用详解

父组运搜件调用子组件的方法，可以传递数据。
父组件：

子组件：

子组件调用父组件的方法并传递数据。

子组件：

父组件：

兄弟组件之间相互传递数据。
首先创建一个vue的空白实例（兄弟组件的桥梁）

子组件a:发送放使用$emit自定义事件把数据带过去。

子组件b:接收方通过$on监听自定义事件的callback接收数据

父组件：

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。
将on变成once，即只执行一次。

移除自定义事件监听器，语法：vm.$off( [event, callback] )
如果没有提供参数，则移除所有的事件监听器；（注意这条，一般在main.js中，移除所有事件绑定）
如果只提供了事件好悄胡，则移除该事件所有的监听器；
如果同时提供了事件与回友拦调，则只移除这个回调的监听器。

Ⅷ Vue基础篇

内容简介：
1）Vue指令
2）computed和watch
3）生命周期钩子
4）组件间的传参
5）插槽
6）修饰符
7）nextTick()

前端三大框架：
Vue：尤雨溪开发
React：Facebook主导开发
Angular：谷歌主导开发

为什么选择Vue?
1.国内Vue的市场份额占比多
2.简单易上手，非常适合前端开发初学者学习

前置知识：
1.HTML、CSS和JS基础
2.了解Node和npm
3.webpack（可选，vue-cli已经封装了打包功能）

使用Vue的吵或两种方式：
1.直接script标签引入vue.js文件
2.基于Node环境创建Vue项目（使用vue-cli初始化一个Vue项目）

前端框架与库的区别
• jquery 库 -> DOM(操作DOM) + 动画+ ajax请求
• 框架 -> 全方位功能

一、指令
指令（Directives）是带有 v- 前缀的特殊属性。

插值表达式和v-text指令被直接解析为字符串；元素绑定 v-html 指令后，解析了msg 变量值里面的html标签，输出真正的html元素。

v-model也可用在自定义组件上。

5.v-for（列表渲染）
使用v-for时应绑定key属性，key属性可以用来提升v-for渲染的效率

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
由于 JavaScript 的限制，Vue 不能检测数组、对象的以下变化：1. 利用索引直接设置数组的某一项 2. 对象属性的添加或删除

二、computed和watch

三、生命周期钩子
什么是Vue生命周期？
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。
总共分为8个阶段：创建前/后，挂载空裤前/后，更新前/后，销毁前/后。
1）beforeCreate
此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问。
2）created
此时可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。
在这个钩子函数中，我们可以进行http请求，把请求到的数据储存在data中。
3）模板编译，把data里面的数据和vue语法写的模板编译成HTML
4）beforeMount
将编译完成的HTML挂载到对应虚拟DOM，此时还未挂载到页面上
5）mounted
编译好的HTML已挂载到页面上
6）beforeUpdate和updated
数据更新时调用，通常使用计算属性或侦听器取而代之
7）beforeDestroy
销毁所有观察者、组件及事件监听
8）destroyed
组件已经完全销毁，组件中的数据、方法、计算属性、过滤器等都已不可用。

四、组件间的通信
1.父子组件间的通信
父子组件通信可以总结为props向下传递，事件向上传递。

单向数据流：父级 prop 的更新升亏伍会向下流动到子组件中，但反过来不行。
每个Vue实例都实现了事件接口：子组件使用 this.$emit(eventName,optionalPayload) 触发自定义事件。父组件在使用子组件的地方直接用v-on来监听子组件触发的事件。

父组件通过ref直接调用子组件中的方法。
子组件调用父组件中的方法：
1）子组件中通过 this.$parent.fatherMethod() 来调用父组件的方法
2）子组件用$emit向父组件触发一个事件，父组件监听这个事件
3）父组件通过props把方法传入子组件中（type: Function），在子组件里直接调用这个方法

2.兄弟组件间的通信
其中一种方法是让父组件充当两个子组件之间的中间件（中继）；
另一种就是使用EventBus（事件总线），它允许两个组件之间直接通信，而不需要涉及父组件：

Vue原型上的方法：

五、插槽

3）作用域插槽

使用场景：
在使用ElementUI组件库的el-table组件时，表格的编辑和删除操作要用到作用域插槽。因为el-table组件，就是当前组件的子组件。通过作用域插槽很容易拿到当前表格行的索引和内容，这样就可以很方便地进行编辑、删除的操作。v-slot指令是Vue2.6之后，作用域插槽的新语法，旧语法（slot-scope）现在还保留，但3.0之后会移除。

六、修饰符

2.事件修饰符
vue提倡的是在方法中只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，所以提供了事件修饰符用于DOM的事件处理。

3.按键修饰符

七、nextTick()
定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。（当数据更新了，在dom中渲染后，自动执行nextTick的回调）

应用场景：需要在视图更新之后，基于新的视图进行操作。

Ⅸ vue父子组件之间的通信

概述

每一个.vue 文件就是一个组件，组件和组件相互组合，就成了一个应用，这就涉及到的组件和组件之间的通信，最常用的就是父子之间的通信。在vue 中，在一个组件中通过 import 引入另一个组件，这个组件就是父组件，被引入的组件就是子组件。

在vue-cli 项目中，src 文件夹下有一个App.vue 文件，它的script标签中，import Hello from './components/Hello'，那么App.vue 就是父组件，components 文件夹下的Hello.vue 就是子组件。父组件通过props 向子组件传递数据，子组件通过自定义事件向父组件传递数据。

父------子

父组件向子组件传值, 它主要是通过元素的属性进行的. 在App.vue 的template中,有一个, 这就是我们引入的子组件. 给其添加属性如mes-father="message from father"; 父组件将数据传递进去,子组件需要接收才能使用. 怎样接收呢?

在Hello.vue 中, export default 后面的对象中,添加一个字段props, 它是一个数组, 专门用来接收父组件传递过来的数据. props: ["mesFather"], 这里定义了mesFather 字符串, 和父组件中定义的元素的属性一一对应.

注意：在父组件,就是在元素中定义的属性是mes-father，没有一一对应啊? 这主要是因为，在html 元素中大小写是不敏感的。如果我们写成，里面的mesFather 就会转化成mesfather, 相当于我们向子组件传递了一个mesfather数据，如果在js 文件中，我们定义props: ["mesFather"]，我们是接受不到数据的，因为js 是区分大小写的，只能写成props: ["mesfather"]. 但是在js 文件中，像这种两个单词拼成的数据，我们习惯用驼峰命名法，所以vue 做了一激神个转化，如果在组件中属性是- 表示，它自动会转化成驼峰式。传进来的数据是mes-father, 转化成mesFather, 我们在js 里面写mesFather, 一一对应，子组件可以接受到组件。props 属性是和data，methods 属性并列的，属同一级别。props 属性里面定义的变量，在子组件中的template 中可以直接使用。

App.vue文件：

Hello.vue文件：

这时，在页面中看到 message from father 字样，父元素向子元素传递数据成功。

子------父

子组件向父组件传递数据，需要用到自定义事携铅野件。例如，我们在Hello.vue，写入一个input, 接收用户输入，我们想把用户输入的数据传给父组件。这时，input 需要先绑定一个keypress 事件，获取用户的输入，同时还要发射自定义事件，如valueUp, 父组件只要监听这个自定义事件，就可以知道子组件要向他传递数据了。子组件在发射自定义事件时，还可以携带参数，父组件在监听该事件时，还可以接受参数，参数，就是要传递的数据。

在Hello.vue template中，添加一个input输入框，给它一个v-model 获取用户的输入，再添加keypress的事件，用于发射事件，传输数据。script 中添加data，定义变量来获取用户的输入，添加methods 来处理keypress事件的处理函数enter

Hello.vue文件：

在App.vue 中，template中hello 组件绑定一个自定义事件，@valueUp =“receive”, 用于监听子组件发射的事件，再写一个辩喊p 元素，用于展示子组件传递过来的数据，<p>子组件传递过来的数据{{childMes }}</p>

相应地，在scrpit中，data 中，定义一个变量childMes, 并在methods 中，定义一个事件处理函数reciever。

App.vue文件：

这时在input中输入内容，然后按enter键，就以看到子组件传递过来的数据，子组件向父组件传递数据成功。

当在input输入框中输入数据，并按enter键时，它会触发keypress.enter事件，从而调用事件处理函数enter，在enter 中，我们发射了一个事件valueUp，并携带了一个参数，由于在<hello @valueUp=”recieve”></hello> 组件中，我们绑定valueUp 事件，所以父组件在时刻监听valueUp 事件，当子组件发射value 事件时，父组件立刻捕获到，并立即调用它的回调函数receive, 在receive 中，我们获取到子组件传递过来的数据，并赋值了data 中的变量childMes, 由于data 数据发生变化，从而触发dom更新，页面中就显示子组件传递过来的内容。

谢谢！结束！

Ⅹ vue-bus实现兄弟组件通讯

一、为枝隐芦什么要使用vue-bus？猛带

学习vue的开发者都知道，父子组件的直接的通讯直接使用vue提供的props属性和emit方法。props接受来自父组件的参数，emit将子组件的参数传递给父组件。这样一来父子组件之间的参数传递就得到了解决。（之前做项目的时候看到$parent和$children也可以进行父子组件和兄弟之间的参数传递，但是不提倡，原因在于如果组件想要替换位置就有问题）。

那么问题来了，兄弟组件如何进行通讯？有哪些方法

1、vuex全局状态管理

2、bus总线机制/发布订阅者模式/观察者模式

两者相比较，前者适用于大型项目的开发，如果项目业务没那么复杂，推荐使用bus来进行解决这类问题。

二、vue-bus如何使用？

第一步：使用npm install vue-bus --save

第二步：在main.js进行全局注册

第三步：在一个页面引用两个兄弟组件

第四步：使用emit进行参数传递

第五步：在created或mounted生命周期钩子，执行事件监听。最后记得将触发的事件销毁，不然会出现点击多次触发的情况。

三、bus总线机制/发布订阅者模式/观察者模式

比如有一个bus对象（中央事件总线），这个对象上有两个方法，一个是on（监听，也就是订阅），一个是emit（触发，也就是发布），就好比我们订阅报纸，到报社去付钱，才知道你要订阅的。

观察者模式是用来监听数据变化，改变视图层。

有什么解释的不好的，希望携拿帮我指正，万分感谢。

对你有帮助的给个赞

导航:首页 > 编程语言 > vuejs父子组件事件监听

vuejs父子组件事件监听

与vuejs父子组件事件监听相关的资料

友情链接