15-子传父（自定义组件，this.$emit(方法,需要传递的参数)）

最新推荐文章于 2022-10-09 09:36:56 发布
最新推荐文章于 2022-10-09 09:36:56 发布
阅读量291 收藏
点赞数
分类专栏： VUE基础语法 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52135717/article/details/109776412
版权

15-子传父（自定义组件）

<!DOCTYPE html>
<html>
	<head>
		<script src="./js/vue.min.js"></script>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用V-ON调用方法 -->
			<cpn @itemclick='cpnclick'></cpn>
		</div>    <!-- 父组件模板 -->
		
		<template id="cpn1">
			<div>
				<button v-for="item in categories"  @click="btnclick(item)">{{item.name}}</button>
			</div>
		</template>  <!-- 子组件模板 -->
		<script>
			
			
			const app = new Vue({
				el:"#app",
				data(){
					return{
						
					}
				},
				
				
				components:{
					'cpn':{
						template:'#cpn1',
						data(){
							return{
								categories:[
									{id:'aaa',name:'热门推荐'},
									{id:'bbb',name:'家用电器'},
									{id:'ccc',name:'手机数码'},
									{id:'ddd',name:'世界名著'},
								]
							}
						},
						methods:{
							btnclick(item){
								console.log(item)
								//把item发送给父组件
								//发射事件,使用  this.$emit（'方法名,需要传的参数'）进行向父组件发射信息
								this.$emit('itemclick',item)
							}
						}
					}
				},
				
				
				
				methods:{
					cpnclick(){
						console.log('cpnclick')
					}
				}
			})
			
		</script>
	</body>
</html>


<!-- 子传父通讯，建议的来说就是子组件创建传参的方法function 向父组件进行传递参数，上面的案例，总的步骤就是：
1、创建子组件与父组件模板
2、定义子组件的参数数组，在template里写入按钮V-FOR
3、在子组件的实例中创建methods的单机click方法，并通过此方法进行向父组件传递参数，其中this.$emit（'方法名,需要传的参数'）
是进行向父组件传递信息的一个重要代码
4、在父组件中调用子组件
5、进行发射信息后，创建父组件接收方法
6、在上方父组件内部的子组件中<cpn></cpn> 添加V-on 调用父组件方法 -->
weixin_52135717
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面之间传this,this.$emit
weixin_28745309的博客
06-04 1204
vue $emit 调用父组件异步方法，执行完毕后再执行如题，或者不用$emit能实现也行// 可以使用回调的方法// 父页面 // 父页面调用组件的html 中 添加事件 @test="test" methods : { test(data, cab) { setTimeout(() => { // 这里使用定时器 模拟执行完方法 console.log(data) // 这是传递过来的参...
Vue.js父与子组件之间传参示例
10-20
子组件可以通过`$emit`方法触发自定义事件，将数据传递回父组件。在`App.vue`中，子组件`componentA`绑定`child-say`事件，当按钮被点击时，`child-say`事件被触发，将消息`msg`传递给父组件。父组件`App.vue`监听...
Vue学习之参数传递与事件分发使用this.$emit(‘自定义事件名‘, 参数)自定义事件删除待办事项
相约滦北来看你
07-11 1355
使用自定义事件删除待办事项 数据项在 Vue 的实例中，但删除操作要在组件中完成，那么组件如何才能删除 Vue 实例中的数据呢？ 此时就涉及到参数传递与事件分发了，Vue 为我们提供了自定义事件的功能很好的帮助我们解决了这个问题；使用this.$emit(‘自定义事件名’, 参数)，操作过程如下 修改创建 Vue 实例代码 var vm = new Vue({ el: '#vue', data: { todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事
自定义事件——this.$emit
zsl2010zsl的专栏
05-07 529
数据项在Vue的实例中，但是删除操作要在组件中完成，那么组件如何才能删除Vue实例中的数据呢？此时就涉及到参数传递与事件分发了，Vue为我们提供了自定义事件的功能，很好的帮助我们解决了这个问题：使用this.$emit(‘自定义事件名’, 参数)。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
2021/10/09 北京 vue父子组件通信--- 自定义事件 this.$emit（）
m0_56799642的博客
10-09 271
第一件要明白的是自定义事件是给组件使用的，考虑一下怎么触发我们自己定义的事件？ 由于是给student组件绑定了自定义事件，要触发就找student组件。事件触发后会调用methods里的demo()方法. 那么来看看我们的student组件是如何触发父组件里我们自定义的事件的。一行代码: this.$emit() 在模板template里，定义一个按钮，方法里调用this.$emit() 子组件给父组件传递数据的俩种方式，props和自定义事件。在触发事件getStu...
vue中 关于$emit的用法（父子组件传值）
aju90208的博客
03-27 248
1、父组件可以使用 props 把数据传给子组件。2、子组件可以使用 $emit 触发父组件的自定义事件。vm.$emit( event, arg ) //触发当前实例上的事件vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city">...
详解vue中this.$emit()的返回值是什么
10-17
在Vue组件中，当你需要将数据或事件从子组件传递给父组件时，可以使用`this.$emit()`。例如，在提供的代码示例中，子组件`EventDemo`有一个`handleChange`方法，该方法在`input`元素的`change`事件触发时被调用。在...
对vue.js中this.$emit的深入理解
10-18
在Vue.js中，`this.$emit` 是一个非常重要的功能，它允许子组件与父组件进行通信，将数据或事件传递回上层。通过深入理解`this.$emit`的工作原理，开发者可以更好地构建复杂的组件结构，并实现灵活的数据交互。下面...
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别？.pdf
最新发布
08-05
$emit 方法只能向父组件或祖先组件派发事件，不能向子组件或后代组件派发事件。$on 方法可以监听来自任何组件的事件，但需要指定事件的作用域，使得事件只在指定的组件中有效。 在实际开发中，我们可以根据需要选择...
vue子组件使用自定义事件向父组件传递数据
01-19
使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <...
VUE子组件使用this.$emit()向父组件传值
蓝天⊙白云的博客
07-13 493
子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件，然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from './components/indexImportOrder' 声明 //定义组件 components:{ indexImportOrder, ...
vue2中子组件向父传值$emit方法的使用
ONLYSRY的博客
10-09 5640
vue2中子组件向父传值$emit方法的使用。
子组件向父组件传值：含参数及不含参数使用emit的两种情况
weixin_43312391的博客
01-19 1296
子组件向父组件传值两种方式：1.不含参数 2.含参数 前期工作： 在父组件的vue页面中引入子组件 template中： <ColorManager v-show="showColor" /> script模块中： import ColorManager from './ColorManager.vue' export default { components: { ColorManager }, } script模块methods方法中对beforeShowCol
vue $emit()传参接收方式
FantasyBreaker的博客
02-07 8170
子组件传出单个参数时： // 子组件 this.$emit('test',this.param) // 父组件 @test='test($event,userDefined)' 其中$event是子组件传递的参数，第二个参数为父组件传的参数，如果没有可以不传。 子组件传出多个参数时： // 子组件 this.$emit('test',this.param1，this.param2, this.param3) // 父组件 arguments 是以数组的形式传入 @test='test(argume.
vue 子传父 this.$emit(‘事件名称‘,参数)
Alencai的博客
04-21 802
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue组件化开发-子传父 $this.emit('事件名称',参数)</title> </head> <body> <div class="app" id="app"> <h2>子传父 this.$emit('事件名称',参数)</h2&g
vue父子组件通信（父组件向子组件传递参数，子组件监听参数变化调用对应方法）
Flowering_Vivian的博客
10-30 1736
子组件监听父组件传递参数变化
VUE父组件监听$emit事件，如何传递多个父组件自己的参数
kouryoushine的博客
10-17 4665
背景 子组件可以通过this.$emit(‘change’, ‘parm’:‘value1’,‘parm2’:‘value2’…)传递多个参数 父组件监听事件传参有两种方式 方式1：父组件自己无参数 方法名可以不用带参数，函数中的e代表change事件的对象，直接获取参数即可 <uni-rate value="5" @change="clickStar" :activeColor="star...
this.$emit 子组件向父组件传递事件并携带参数
e87e09e11的博客
09-26 3136
子组件：向父组件传递事件toDetail  并 传递参数 ‘lalalalalala’ this.$emit('toDetail', ‘lalalalalala’);  父组件监听事件 并输出参数 &lt;total-start-sites  @toDetail="toDetails"&gt;&lt;/total-start-sites&gt; 注意：监听的时候  触发的方法只写方法名  ...
vue组件中的值，传递给父组件使用 this.$emit完成
07-23
在Vue组件中，如果想要将一个值传递给父组件，可以使用自定义事件和`$emit`方法。下面是一个示例： 在子组件中，定义一个值，并在需要的时候通过`$emit`方法触发自定义事件，并将值作为参数传递： ```javascript // 子组件 <template> <div> <button @click="sendValue">发送值</button> </div> </template> <script> export default { data() { return { value: 'Hello, World!' } }, methods: { sendValue() { this.$emit('custom-event', this.value); } } } </script> ``` 然后，在父组件中，通过监听子组件触发的自定义事件，获取传递的值，并在需要的地方使用它： ```javascript // 父组件 <template> <div> <child-component @custom-event="handleCustomEvent"></child-component> <p>接收到的值：{{ receivedValue }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { receivedValue: '' } }, methods: { handleCustomEvent(value) { this.receivedValue = value; } } } </script> ``` 通过这种方式，你可以将子组件中的值传递给父组件，并在父组件中使用它。当子组件中的按钮被点击时，值会被发送到父组件，并在父组件中显示出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值