子向父传参1——$emit用法

最新推荐文章于 2022-10-31 21:38:45 发布
最新推荐文章于 2022-10-31 21:38:45 发布
阅读量265 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30541261/article/details/103512499
版权

<!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-UA-Compatible" content="ie=edge">

    <title>子向父传参1——$emit用法</title>

    <script type="text/javascript" src='js/vue.js'></script>

    <script>

    window.onload = function(){

        new Vue({

            el:'#my',

            data:{ 

              obj:{name:'老张',age:50}

            },

            components:{  // 局部组件

              'my-parent':{  //组件的名称

                template:'#my-parent',

                data(){

                  return {

                    obj:{name:'小张',age:20},

                    childHobby:''

                  }

                },

                methods:{

                  get:function(childData){    //子发送消息的触发方法

                    this.childHobby = childData;   //把子的值赋给另一个变量

                  }

                },

                props:['data'],

                components:{

                  'my-child':{

                    template:'#my-child',

                    data(){

                      return {

                        hobby:'打篮球'

                      }

                    },

                    props:['data'],

                    methods:{

                      send:function(){

                        this.$emit('abc',this.hobby)     //$emit('发射名称',参数)  

                      }

                    }

                  }

                }

              }

            }

        })

    }

    </script>

    <template id="my-parent">

        <div>

          <h1>我是父组件</h1>

          <p>姓名：{{data.name}}</p>

          <p>年龄：{{data.age}}</p>

          <p>儿子的爱好：{{childHobby}}</p>

          <my-child :data="obj" v-on:abc="get"></my-child>

        </div>

    </template>

    <template id="my-child">

      <div>

        <h1>我是子组件</h1>

        <p>姓名：{{data.name}}</p>

        <p>年龄：{{data.age}}</p>

        我的爱好：<input type="text" v-model="hobby" @input="send()"/>

        <button @click="send()">子传父</button>

      </div>

  </template>

</head> 

<body>

  <div id="my">

     <my-parent :data="obj"></my-parent>

  </div>

</body>

</html>

fjdream
关注
uniapp 使用 $emit和$on——$on中无法为data中的变量赋值
weixin_48596030的博客
12-05 1369
问题在于this的指向，解决办法是使用变量保存$on，其次再为data中的值赋值。
Vue3 - 组件通信（子传父）
王佳斌
11-18 4712
vue3.js 官方文档，vue3子组件给父组件传递数据，vue3组件通信 子传父，vue3组件通信官方文档教程，vue3的组件传递之子传父(项目实操)，vue3组件之间通信(二)——子传父属性和方法，Vue3父子组件间传参通信，二、vue3.0之组件通信之父子通信，vue实现组件间通信的几种方式(父传子,子传父)，组件通信3:子传父($emit)，Vue3中的父传子和子传父如何实现，vue3.x组件间通信，vue3 父子组件通信，VUE3 子传父，vue3 父子组件传值通信，Vue3 - 组件通信（子传父
Vue中子传父$emit的使用方法
Master_Tang的博客
07-21 1910
子组件<Quarter.vue> 想要把selectSeason方法里面的showValue值传到父组件中 这一块很简单 selectSeason(i) { let that = this that.season = i + 1 let arr = that.valueArr[i].split('-') that.getValue(that.year + arr[0] + '-' + that.year + arr[1]) th
子传父$emit
fleeno的博客
03-04 341
<body> <div id="app"> <!-- <div> <h1>A --</h1> <div> <p>B</p> </div> </div> --> <my-a></my-a> ...
子向父传参2——$emit用法
qq_30541261的博客
12-12 487
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <metahttp-equiv...
子组件传值给父组件中的$emit
elephant230的博客
07-13 428
组件传值的现象很普遍，大多出现在页面头部或是导航栏中，而这两部分通常都是各个页面的公共部分，所以涉及到组件间的相互传值在所难免，索兴针对近期写的项目做个小笔记，先来说说子组件给父组件传值的现象。 先展示父组件中引入的子组件： 红色箭头的指示位置，即为引入的子组件，注意子组件绑定的事件名称和下方methods中的事件对应 子组件内部的事件： this.$emit大显神通 红色箭头指...
Vue 中 组件通信 - 子传父（自定义事件）
热门推荐
qq_45803050的博客
07-19 1万+
Vue 中 组件通信 - 子传父（自定义事件） 子传父步骤： 在子组件的 data 里面定义好 要传递的数据 在子组件的模版里面正常使用 该数据 （一般是通过一定的动作，如点击，滑动等，来自定义事件向父组件传递，这里以 click 为例） 在子组件的 methods 里面 定义 this.$emit(‘itemclick’,item)， 将 名字为 itemclick 的自定义事件传给父组件，item 是参数 在父组件使用子组件的时候，利用 v-on ，将接收到的数据传递给自己的事件 @
Vue3官网-深入组件（五）组件基础（$emit触发事件、在组件上绑定v-model双向数据绑定）、组件注册（组件名、全局注册、局部注册）
qq_43456781的博客
09-17 554
Vue3官网-深入组件（一）组件基础（$emit触发事件、在组件上绑定v-model双向数据绑定）、组件注册（组件名、全局注册、局部注册） 文章目录Vue3官网-深入组件（一）组件基础（$emit触发事件、在组件上绑定v-model双向数据绑定）、组件注册（组件名、全局注册、局部注册）1. 组件基础基本实例组件的复用组件的组织通过 Prop 向子组件传递数据监听子组件事件使用事件抛出一个值在组件上使用 v-model通过插槽分发内容动态组件解析 DOM 模板时的注意事项元素放置限制Element Place
vue $refs可以获取到子组件，但是子组件emit获取不到父组件
最新发布
07-28
- *3* [Vue $emit $refs子父组件间方法的调用](https://blog.csdn.net/qq_37880968/article/details/79201874)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
uniapp——页面传参数的几种方法总结
aliyun3的博客
06-16 3283
vue3-layer：基于Vue3.0开发的PC桌面端自定义对话框组件。 基于vue3构建的PC网页端自定义弹出框组件。全面覆盖各种弹窗应用场景，拥有10+种弹窗类型、30+种自定义参数配置、7+种弹窗动画效果，支持 .........
28-2 子组件传递父组件 数据 — $emit 的使用
Bi-Hu的博客
07-20 247
父传子 我们学了，现在我们学 子传父 还记得那个图吗 其实就是 用 $emit 传递。换句话说就是传递自定义事件： 直接上代码 Vue其实很繁琐，框架这种东西就得照猫画虎，说道理是没用的： 这里我们还是一样用VUE实例来当父组件 因为代码很多 为了简便吧 其实都一样的： 下面这个代码是一个很简单的一个显示数据的代码：【我们根据这个代码来添加 子组件数据 传给 父组件】 <!--新建模...
子组件向父组件传参的几种方法
随笔记录，有些许菜，莫怪莫怪
07-19 9403
子组件向父组件传参的几种方法
vue2中子组件向父传值$emit方法的使用
ONLYSRY的博客
10-09 6120
vue2中子组件向父传值$emit方法的使用。
第二十三篇 Vue中子传父 - $emit
灵魂学者的博客
10-31 770
上一篇内容讲到Vue中组件通信的父传子，知道父组件向子组件传值是有必要的，有与之相应的应用场景，组件通信当中的子传父，本篇内容记录就是关于这个子组件向父组件传值是通过怎样的方式以及子组件向父组件传递可以有哪些场景运用；通过以上的这个图片能够简单的先了解它的一个过程，下面通过代码编写演示，让你更加清楚知道子传父是一个怎样的过程；通过上面的演示，通过$emit能够将子组件中的值传递到父组件中去，$emit可以触发父组件中定义的事件，就这样实现一个子传父；
vue子传父($emit)
xuxingyuan_的博客
06-13 341
在子页面 <div @click="enterfd"></div> 在methods写 enterfd(){ this.$emit("enterfd") } 父页面 <div @enterfd="enterfd"></div>
【Vue】组件通信（子传父 $emit）
weixin_39415598的博客
01-12 141
微信订阅号：Rabbit_svip 组件和组件之间是相互独立的。 如果父组件需要传值给子组件，可以看这里 【Vue】组件通信（父传子 props） 本节主要讲解 子组件 传值给 父组件。 主要用到的关键词是：$emit HTML代码 <div id="app"> <parent></parent> ...
组件通信3：子传父（$emit）
过客如期的博客
10-01 1418
一，前言 1.props和$atrrs具有数据的单向性，只能由父组件向子组件传递数据。 2.在vue中，我们可以使用自定义事件实现子组件向父组件传递数据。 二，自定义事件 1.在子组件上使用v-on指令绑定自定义事件， 2.事件的名称推荐使用-分割 三，$emit触发事件 1.在子组件我们可以使用组件的$emit .........
Vue_子向父组件传参
大脸猫~
06-29 610
子向父传递参数需要自定义事件 使用 on(eventName)监听事件使用on(eventName)监听事件使用on(eventName) 监听事件 使用 emit(eventName)触发事件 子向父传递参数： 在子组件中个设置一下触发函数，并将参数传给父组件。 export default{ data(){ return{ msg:'Hello ...
子给父传参数
weixin_45481456的博客
06-22 204
子组件传值给父组件
vue2 子父传参 $emit
05-25
在 Vue2 中，可以通过 `$emit` 方法在子组件和父组件之间传递参数。 首先，在父组件中使用子组件时，可以通过 `v-on` 指令监听子组件触发的事件，例如： ```html <template> <div> <ChildComponent v-on:my-event="handleEvent" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent, }, methods: { handleEvent(data) { console.log(data); // 子组件传递的参数 }, }, }; </script> ``` 在子组件中，可以通过 `$emit` 方法触发一个自定义事件，并且可以传递需要传递的参数，例如： ```html <template> <div> <button @click="emitEvent">点击触发事件</button> </div> </template> <script> export default { methods: { emitEvent() { this.$emit('my-event', '传递的参数'); }, }, }; </script> ``` 这样，当子组件中的按钮被点击时，会触发 `my-event` 事件，并且传递了一个字符串参数 `'传递的参数'`。父组件中的 `handleEvent` 方法会接收到这个参数并进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值