组件：事件传递$emit

最新推荐文章于 2023-01-13 20:28:56 发布
最新推荐文章于 2023-01-13 20:28:56 发布
阅读量81 收藏
点赞数
原文链接：http://www.cnblogs.com/Jeely/p/11057477.html
版权 
<!DOCTYPE html>
<html lang="zh">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <link href="../css/style.css" rel="stylesheet"> </head>
<body>
<div id="myApp">
    <h1>人生加法</h1>
    <add-method :a="6" :b="12" v-on:add_event="getAddResult"></add-method>
    <hr/>
    <h3>{{result}}</h3>
</div>
<script>
    Vue.component('add-method', {
        props: ['a', 'b'],
        template: '<div><button v-on:click="add">加吧</button></div>',
        methods: {
            add: function(){
                var value = 0;
                value = this.a + this.b;
                this.$emit('add_event', {
                    result:value
                });
            }
        },
    });
    var myApp = new Vue({
        el: '#myApp', 
        data: {
            result: 0
        },
        methods: {
            getAddResult: function(pval){
                this.result = pval.result;
            }
        },
    });
</script>
</body>

</html>

 

转载于:https://www.cnblogs.com/Jeely/p/11057477.html

weixin_30344995
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue $emit()不能触发父组件方法的原因及解决
10-15
确保通过 `props` 正确地从父组件向子组件传递数据，并在子组件中更新这些属性。例如，如果子组件需要改变 `total` 属性，需要确保 `total` 已经声明为子组件的 `props`。 ```javascript Vue.component("child", { ...
Vue的$emit传值
xiaoxiaoluckylucky的博客
03-08 1万+
$emit，父组件传data给子组件，子组件通过$emit来触发父组件中绑定在子组件身上的事件，达到改变父组件中的data的方法。下面介绍$emit传值的几种方法： 一：$emit传递单值 子组件Test.vue： <template> <div> <div>子组件</div> <button @click="changeFather">点击我向父组件传递参数</button> </div> </tem
vue学习之组件传值、自定义事件
yoghurt&girl的博客
10-19 746
子组件传父组件
Vue中的$emit的使用方法与理解
qq_34082921的博客
01-13 5057
> - 学到Vue的组件内传值时，props父传子还能理解，但是对子组件给父组件传值（也就是$emit方法），对于这个$emit我感觉有点绕，知道它的作用，但是对它的用法还是掌握不好，主要还是对于为什么这么用很疑惑。 >- 对父组件给子组件传值很简单，也很好理解。父组件给子组件传值只要在子组件标签内用V-bind写一个函数方法（也可以传参数）用props接收就可以直接使用了。但是到子组件给父组件传值就变得复杂了，首先要先在子组件标签内声明触发$emit的事件，触发条件后用$emit发送自定义事件（包含事件
qt使用emit发射事件信号完整流程
09-12 3521
关联信号与信号槽,使用emit发射信号
vue中组件通信的三种方式/组件事件事件传递
Jerome的博客
07-11 1757
欢迎微信关注Jerome blog，用技术的心去生活
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
08-27
子组件可以通过 $emit 触发事件，参数为自定义事件名称，写法可以是小写或者用 - 连接，例如 event 或 event-name。父组件可以通过 v-on 监听事件，获取数据。 // 父组件：parent.vue <child v-on:childevent='...
$emit触发事件拿不到传递的参数.zip
10-29
在Vue.js框架中，`$emit`是用来在组件实例中触发自定义事件的，通常用于父子组件间的通信。然而，有时候我们可能会遇到一个问题，即在父组件中通过`$on`监听子组件触发的事件时，无法接收到传递的参数。这个问题可能...
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
10-20
主要介绍了vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法，非常不错，具有参考借鉴价值，,需要的朋友可以参考下
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
10-15
父子组件间的通信通常使用`props`向下传递数据，而子组件向父组件传递信息则使用`$emit`。当子组件需要通知父组件某个操作已完成或者需要父组件做出响应时，可以触发一个自定义事件。例如： ```vue // 子组件 ...
组件emit基础
差不少的博客
07-11 364
自定义组件上的自定义事件： go（@go）调用 @go是怎么来的： 是$emit（“go”）决定的，名字得一致 为什么@go是点击事件： 因为 @click=‘emit，用的是click事件 可以$emit多个事件： 通过$emit的方法传参： 接收参数： 在调用的方法中添加参数，就能获得这个参数 emit多个参数： 与计算属性一起使用： ......
组件之间数据信息传递方法
weixin_50443809的博客
05-07 1457
方法一 将组件中需要传递的东西交给共同的父亲，父亲再将数据交给其中一个儿子，这个过程通过props的方法传递，让son2接收 props['xxx'],此时接收的数据出现在son2的实例对象vc身上，所以模板可以使用。 此时son1要获得数据1，father就要提前创造一个函数传递给son1,然后son1调用函数。此时就可以定义在father中的函数，进行操作，这就意味着只要son1调用函数，vue就会重新解析模板，然后更新数值。 ......
vue 组件通信 事件处理
block_xu的博客
07-08 935
本文主要是通过源码了解，vue是怎样把事件传递给子组件并能够给正常调用的。首先看一个超级简单的demo demo中有一个组件，父级向里边传入了一个函数，个组件中通过调用了它，这是一个最简单的事件通信方法 跳过不相干的步骤，我们从创建组件的虚拟节点处的源码开始说起想了解他的实现原理，可以拆开的整体流程，从方法下手，来看看子组件中函数调用时都做了什么 （函数就是一个通过调用并抛出错误的通用函数，文章最底下会简略说明该函数）可以看到，方法实际就是找到并调用该素组中的所有方法，那我们现在的目标就是找到中的数据怎么存
Vue的事件类型&组件中数据和事件的传递
thwr1881的博客
08-13 1362
Vue的事件类型&组件中数据和事件的传递
Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖
粉丝们务必加入微信粉丝群
07-14 3180
随着Vue 3.2的发布，一个新的组合工具提供给我们，叫做 。你是否曾经创建过一个需要向模板提供一些方法和属性的组件，但又希望这些方法对组件是私有的，不能被父类调用？如果你在开发一个开源的组件或库，你有可能想保持一些内部方法的私有性。在Vue 3.2之前，这并不容易实现，因为所有在选项API中声明的方法或数据等都是公开的，所以模板可以访问它。组合API也是如此。我们从方法中返回的所有东西都可以被父类直接访问。让我们看一个实际的例子。想象一下，我们有一个组件，它创建了一个计数器，每一秒都会更新这个计数器。**
vue学习（六）子组件的事件传递给父组件
我是混IT圈的
03-09 3255
1、子组件：DemoHello.vue <template> <!-- @click="getUserInfo()"： 子组件自定义事件 --> <div class="demo" @click="getUserInfo()"> <h1>测试创建组件</h1> </div> </template> <script> export default { name: 'Demo
vue中emit的用法
热门推荐
程文英
09-11 2万+
vue中子传父参数的方法共有两种： 1、子组件通过emit传输 2、通过自定义组件传输 下列优先讲解下其emit的传输方法 在父组件中 （1）首先需要定义其改变的函数，一般emit多用于点击事件，例如我目前所在地的名称是北京，我想通过子组件的点击，导致我的名称发生其改变 （2）定义其data属性存储器数据 <template> <div class="hello"> <h2>我是父组件,我需要建立一些参数</h2> <h3>我所
VUE父组件监听$emit事件，如何传递多个父组件自己的参数
kouryoushine的博客
10-17 4669
背景 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数 父组件监听事件传参有两种方式 方式1：父组件自己无参数 方法名可以不用带参数，函数中的e代表change事件的对象，直接获取参数即可 <uni-rate value="5" @change="clickStar" :activeColor="star...
vue组件踩坑笔记之$emit事件传参
jaquechen的博客
07-23 4013
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
Uncaught TypeError: this.$emit is not a function
最新发布
06-09
如果在 Vue 3 中使用 `this.$emit` 出现了 `Uncaught TypeError: this.$emit is not a function` 错误，通常是因为你的组件没有继承自 `Vue` 对象...这样，我们就可以在组件中使用 `this.$emit` 来触发父组件中的事件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值