Vue-自定义事件之—— 子组件修改父组件的值

如何利用自定义的事件,在子组件中修改父组件里边的值?

关键点记住:三个事件名字

步骤如下:

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

第一步:你要想改动父组件的值,你父组件得先有值让你改吧!所以,

在父组件定义值:

第二步:同样的,二者之间咋就成了父子关系了呢?你得让一个组件里边装另一个组件吧,所以

在父组件Second-module中调用、注册、引用进来子组件Three-module:

  调用:

  注册:

  引用:

第三步:父组件定义公用值,就是为了让子组件用的,你得把值给了子组件吧!不要小气:

找到二者的契合点(组件引用处),用bind 把值绑给他。

第四步:父组件扔过来了,子组件要接住啊,接不住掉地上摔烂了你还杂用!

第五步:子组件你把值拿过来了,就要使用父组件的值吧,不用就放烂了。不用你接他干哈!

好了,转折点到了,接下就是主题了:改动值。

第六步:子组件你拿到值用着不爽,首先要设置一个开关(click事件)启动“申请改动父组件值”的程序吧

第七步:在这个程序中,$emit 启动计划:你要自己找一个壮士(自定义事件名),好交代让它出征去改动父组件的值,并让他带上一个参数(就是要把父组件的值改成啥),让他去带话 --> 传递给父元素。

emit英语中是发射的意思,就是让这个自定义事件发射、出发、出征的意思。让自定义事件, 去执行改动父元素值的伟大壮举。他是一个使者,是链接子组件改动父组件值的桥梁。

第八步:自定义事件来到父组件中,找到和他同名的事件(这个事件是绑定在 要求改动值的子组件 标签上的)。

自定义事件和他的对接人(同名事件)交接,同名事件执行早在这里准备好的另一个父组件里边的函数A,并且把自定义事件从子组件中带来的参数转交接,给了这个函数A的$event(固定名字,不能改)参数。

第九步:因为同名事件在子组件中被触发了,所以他就会执行他后边定义的函数,函数被执行后,这个函数就带着参数“南下”,去父组件的methods找他自己,并执行函数内部的逻辑。

第十步:深明大义的父组件,早在methods中定义好了要修改的逻辑,将要修改的值等于函数带来的参数值(也就是自定义事件捎来的子组件中定义的值)

最后!不贴源码的讲解就是耍流氓:

父组件Second-module源码:

<template>
	<div class="second-module module-cont">  
		<h3 class="txts-cont">
			{{secondlist}}
			<p class="info-p" >! {{ msgOfP }}</p>
		</h3>
		<div class="new-lists">
			<ul class="lists">
				<li v-for="item in newlists">
					<a href="javascript:;" title="item.title">
						<p>{{item.title}}</p>
						<span>{{item.time}}</span>
					</a>
				</li>
			</ul>
		</div>
		<div>
			<p class="error">如果你想尝试更改父组件传过来的引用值,那么其他子组件中引用的值也会报错哦!</p>
			<button class="sec-btn" v-on:click="changeArray">点击我,左边的列表组件也会减少就是一个例子</button>
			<button class="sec-btn" v-on:click="changeString">点击我,更改父组件App中title的值</button>
		</div>
		<three-module v-bind:msgOfP = "msgOfP" v-on:titleChanged = "zidingyi($event)"></three-module>
	</div>
</template>
<script>
	import Threemodule from './Three-module'
	export default {
		name: "second-module",
		components: {
			"three-module": Threemodule 
		},
		props: {
			newlists: {
				type: Array,
				required: true
			},
			secondlist: {
				type: String,
				required: true
			}
		},//获取父组件数据的第二种方式:prop验证.注意写法。定义接受值的类型,并且用对象的形式设置。
		data () {
			return {
				msgOfP : "我在second-module子组件中,我是three-module的父组件,一会儿three-module要修改我。"
			}
		},
		methods: {
			changeArray: function() {
				this.newlists.pop();
			},
			changeString: function(){
				this.secondlist = "改了";
			},
			zidingyi(msg){
				this.msgOfP = msg;
			}
		}
	}
</script>
<style>
	.error{
		color: #f6f;
		font-weight: bold;
	}
	.second-module{
		margin-left: 27%;
		background: #f5f5f5;
	}
	ul{
		background: white;
	}
	.module-cont{
		border: 2px solid Lightgreen;
		border-radius: 5px;
	}
	.txts-cont{
		margin: 0;
		padding: 10px 0;
		border-bottom: 3px solid Lightgreen;
		background: #fff;
	}
	button:hover{
		cursor: pointer;
	}
	button:focus{
		outline: none;
	}
</style>
<style scoped>
	button{
		padding: 10px;
		margin: 10px;
		color: #fff;
		border-radius: 5px;
		border: 1px solid #4488ff;
		background: #4488ff;
	}
	button:hover{
		background: #3a76de;
	}
	.info-p{
		padding-top: 10px;
		font-size: 14px;
		color: red;
		border-top: 2px solid #dedede;
	}
</style>

子组件Three-module的源码

<template>
	<div class="three-module">
		<h2>我是第三个组件,我要实现“子向父传值”</h2>
		<button v-on:click = "changeTitle">点击我修改上边父组件的值</button>
		<p>{{msgOfP}}</p>
	</div>	
</template>
<script>
	export default {
		name: "three-module",
		props: ["msgOfP"],
		data () {
			return {

			}
		},
		methods: {
			changeTitle: function(){
				this.$emit("titleChanged","改掉了,这是three-module子组件传过来的数据")
			}
		}
	}
</script>
<style scoped>
	.three-module{
		margin: 10px 0;
	}
	h2{
		color: #f0f;
		padding: 20px 0;
		background: #222;
	}
</style>

声明:

  请尊重博客园原创精神,转载或使用图片请注明:

  博主:xing.org1^

  出处:http://www.cnblogs.com/padding1015/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

React中的-- 数据流

简介 React的组件简单理解起来其实就是一个函数,这个函数会接收props和state作为参数,然后进行相应的逻辑处理,最终返回该组件的虚拟DOM展现。在Re...

3669
来自专栏陈纪庚

HTML5 drag和drop的亲手实践

最近在公司打杂的时候,突然分到了一个锅,就是要支持一个新的功能:用户可以通过拖曳组件来改变组件的顺序。因此,这阵子就看了一下网上的一些drag和drog的文章以...

1203
来自专栏天天

js事件对象相关随记

1353
来自专栏前端说吧

vue.js: 自定义事件之—— 子组件修改父组件的值

这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module

4824
来自专栏编程语言

Python:pygame的初步使用

4.创建窗口,pygame.display.set_mode(resolution=(0,0),flags=0,depth=0),resolution窗口大小,...

800
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

2307
来自专栏HT

基于HTML5 Canvas 点击添加 2D 3D 机柜模型

今天又返回好好地消化了一下我们的数据容器 DataModel,这里给新手做一个典型的数据模型事件处理的例子作为参考。这个例子看起来很简单,实际上结合了数据模型中...

2728
来自专栏GreenLeaves

JavaScript图片库

将图片放到网上的方法有很多,你可以简单地把所有的图片都放到网页上。但是,如果你打算发布的图片过多,这个页面很快会变的过于庞大,而且加上这些图片后用户要下载的的数...

2476
来自专栏从零开始学 Web 前端

从零开始学 Web 系列教程

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

2525
来自专栏QQ音乐前端团队专栏

前端水印生成方案

安全问题不能大意,对于一些比较敏感的内容,我们可以通过组合使用上述的水印方案,这样才能最大程度给浏览者警示的作用,减少泄密的情况,即使泄密了,也有可能追踪到泄密...

1.7K4

扫码关注云+社区

领取腾讯云代金券