vue-自定義事件之—— 子組件修改父組件的值

如何利用自定義的事件，在子組件中修改父組件裏邊的值？

關鍵點記住：三個事件名字

步驟以下：

這裏，相對本案例，父組件定義爲Second-module，對應的子組件是Three-module

 

第一步：你要想改動父組件的值，你父組件得先有值讓你改吧！因此，

　　在父組件定義值：

 

 

第二步：一樣的，兩者之間咋就成了父子關係了呢？你得讓一個組件裏邊裝另外一個組件吧，因此

　　在父組件Second-module中調用、註冊、引用進來子組件Three-module：

　　調用：

　　

　　註冊：

　　

　　引用：

　　

 

第三步：父組件定義公用值，就是爲了讓子組件用的，你得把值給了子組件吧！不要小氣：

找到兩者的契合點（組件引用處），用bind 把值綁給他。

 

 

第四步：父組件扔過來了，子組件要接住啊，接不住掉地上摔爛了你還雜用！

 

 

第五步：子組件你把值拿過來了，就要使用父組件的值吧，不用就放爛了。不用你接他幹哈！

 

 

好了，轉折點到了，接下就是主題了：改動值。

第六步：子組件你拿到值用着不爽，首先要設置一個開關（click事件）啓動「申請改動父組件值」的程序吧

 

 

第七步：在這個程序中，$emit 啓動計劃：你要本身找一個壯士（自定義事件名，能夠想象成荊軻），好交代讓它出征去改動父組件的值，並讓他帶上一個參數（就是要把父組件的值改爲啥，荊軻手裏拿的那個包着小匕首的地圖🙂，），讓他去帶話 ，既出使秦國（父組件內部）將燕王（子組件）的旨意傳遞給父元素（秦大王）。

emit英語中是發射的意思，就是讓這個自定義事件發射、出發、出征的意思（歡送壯士荊軻是發生在橋上，changeTitle函數就是那個橋，燕王在橋上使用$emit發令，讓自定義事件（軻軻）去執行改動父元素值（改變秦王老大的想法，好比不揍燕國，到項目中就是改變付元素中某個狀態值等）的偉大壯舉。他是一個使者，是連接子組件改動父組件值的橋樑。

這裏注意，"自定義事件名" 必定要用引號括起來，否則會報錯is not defined

 

第八步：自定義事件來到父組件中（秦王），找到和他同名的事件（也就是荊軻刺秦時，接待荊軻的秦國大臣本人了！，他起着在父組件中用於監聽自定義事件的一個做用，時刻準備去火車站接荊軻而後宣荊軻覲見。。這個事件是綁定在 要求改動值的子組件 標籤-燕國在秦國的大使館 上的）。

自定義事件和他的對接人（同名事件）交接，同名事件執行早在這裏準備好的另外一個父組件裏邊的函數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/