參考：
https://blog.csdn.net/weixin_33813128/article/details/94177294
類似方法調(diào)用或?qū)傩栽L問(wèn)
目標(biāo)
- 子組件給父組件傳參數(shù) $emit（觸發(fā)父組件里的事件）只磷，松藉合（掌握）
- 通過(guò) $parent 獲取父組件數(shù)據(jù)和調(diào)用父組件方法颜价，強(qiáng)藉合（了解）
- 子組件訪問(wèn)根組件 $root（了解）
- 動(dòng)態(tài)組件
當(dāng)父組件獲取的數(shù)據(jù)桥言，需用通過(guò)子組件來(lái)動(dòng)作（click煞聪、change等）改變后數(shù)據(jù)盗痒，這時(shí)候我們通過(guò)ref是獲取不到的腔稀，獲取的也是改變前的數(shù)據(jù)隧哮。這時(shí)候需要用$emit
一须蜗、子組件給父組件傳參數(shù) $emit
emit 為觸發(fā)之意硅确，主要作用是子組件觸發(fā)父組件事件，完成對(duì)父組件的操作
觸發(fā)事件與方法調(diào)用不同明肮，方法調(diào)用另側(cè)必須響應(yīng)菱农，但觸發(fā)事件，父類可以不響應(yīng)柿估，不響應(yīng)也不會(huì)報(bào)錯(cuò)
vm.$emit( event, arg )
$emit 綁定一個(gè)自定義事件event循未，當(dāng)這個(gè)這個(gè)語(yǔ)句被執(zhí)行到的時(shí)候，就會(huì)將參數(shù)arg傳遞給父組件;父組件通過(guò)@event監(jiān)聽(tīng)并接收參數(shù)秫舌。
這里面隱式的定義了子-父?jìng)鬟f的步驟：
- 子組件$emit中的第一個(gè)參數(shù)定義父組件的接收事件event的妖，第二個(gè)參數(shù)是傳輸?shù)臄?shù)據(jù)
- 父組件用@event監(jiān)聽(tīng)并接收參數(shù),指定接收到數(shù)據(jù)后的處理函數(shù)
父組件
<template>
<div>
<h1>{{title}}</h1>
<child @getMessage="showMsg" ></child>
</div>
</template>
<script>
import child from '@/components/emit/child'
export default {
data() {
return {
title:'我是父組件的初始值'
};
},
components:{child},
methods: {
showMsg(param_title) {
this.title=param_title;
}
},
}
</script>
子組件
<template>
<h1>我是測(cè)試EMIT的子組件</h1>
</template>
<script>
export default {
mounted:function(){
this.$emit('getMessage','我是子組件給父組件傳遞的值')
},
data() {
return {
};
}
}
</script>
路由
import emittest from '@/components/emit/parent'
{
path: '/emittest',
name: 'emittest',
component: emittest
}
測(cè)試
http://localhost:8080/#/emittest
$emit傳遞多個(gè)參數(shù)
改造子組件
<script>
export default {
mounted:function(){
//第一步：子組件把數(shù)據(jù)發(fā)射給父組件，并約定好父組件用@child-msg綁定接收的方法
this.$emit('getMessage','我是子組件給父組件傳遞的值','追加的數(shù)據(jù)')
},
data() {
return {
};
}
}
</script>
父組件第一種寫(xiě)法
<template>
<div>
<p>我是父組件</p>
<!-- step 2父類響應(yīng)子類的事件足陨，并且指派給showmessage方法進(jìn)行處理-->
<child @getMessage="showmessage"></child>
</div>
</template>
<script>
import child from '@/components/emit/emitchild'
export default{
data(){
return {
}
},
components:{
child
},
//step3 寫(xiě)對(duì)應(yīng)的事件處理函數(shù)
methods:{
showmessage:function(data,data2){
alert(`我收到的子類的信息為`+" "+data+" "+data2);
//可以根據(jù)業(yè)務(wù)進(jìn)行后處理
}
}
}
</script>
父組件第二種寫(xiě)法
<template>
<div>
<p>我是父組件</p>
<!-- step 2父類響應(yīng)子類的事件嫂粟，并且指派給showmessage方法進(jìn)行處理
arguments參數(shù)名是固定的，不能任意改-->
<child @getMessage="showmessage(arguments)"></child>
</div>
</template>
<script>
import child from '@/components/emit/emitchild'
export default{
data(){
return {
}
},
components:{
child
},
//step3 寫(xiě)對(duì)應(yīng)的事件處理函數(shù)
methods:{
showmessage:function(data){
for (var i = 0; i < data.length; i++) {
alert(data[i]);
}
}
}
}
</script>
關(guān)鍵代碼
典型應(yīng)用：
比如兩個(gè)平行的子組件墨缘，一個(gè)是菜單星虹，一個(gè)是列表零抬，他倆有共同父組件，如果想聯(lián)動(dòng)宽涌，點(diǎn)擊菜單項(xiàng)時(shí)可以觸發(fā)父組件的方法平夜，然后這個(gè)方法負(fù)責(zé)去調(diào)用列表組件更新
第二種子類增加或減少參數(shù)時(shí)，父類不需要修改代碼卸亮，擴(kuò)展性更強(qiáng)忽妒，建議使用
通過(guò)$parent 獲取父組件數(shù)據(jù)或調(diào)用父組件方法
子組件
<template>
<div>
<p>子組件</p>
<button @click="showParentMsg">點(diǎn)我獲取父組件的msg</button>
</div>
</template>
<script>
export default{
data(){
return {
msg:''
}
},
methods:{
showParentMsg:function(){
let msg=this.$parent.msg;
alert(msg);
}
}
}
</script>
父組件
<template>
<div>
<child001></child001>
</div>
</template>
<script>
import child001 from '@/components/parentdemo/child001'
export default{
data(){
return {
msg:'我是父組件里的msg'
}
},
components:{child001}
}
</script>
<style>
</style>
路由
import parentdemo from '@/components/parentdemo/parent'
{
path: '/parentdemo',
name: 'parentdemo',
component: parentdemo
}
調(diào)用父類的方法
父類里新增加方法
methods:{
say:function(){
alert("大家好");
}
}
子類調(diào)用
this.$parent.say();
子組件訪問(wèn)根組件 $root（不常用，了解）
子組件訪問(wèn)根組件 $root 當(dāng)前組件樹(shù)的根 Vue 實(shí)例兼贸。如果當(dāng)前實(shí)例沒(méi)有父實(shí)例段直，此實(shí)例將會(huì)是其自已。
改造上面的子組件child001里的showParentMsg方法
methods:{
showParentMsg:function(){
let msg=this.$root.msg;
console.log(msg);
}
}
再執(zhí)行發(fā)現(xiàn)為undefined
$root找的是最根上的對(duì)象溶诞，在腳手架里是 main.js
在 main.js里添加上如下內(nèi)容坷牛，再試一下，就可以了
data(){
return{
msg:'根下的msg'
}
},
高級(jí)篇：動(dòng)態(tài)組件
有的時(shí)候很澄，在不同組件之間進(jìn)行動(dòng)態(tài)切換是非常有用的，比如在一個(gè)多標(biāo)簽的界面里颜及，可以通過(guò)component :is來(lái)指定當(dāng)前切換到哪個(gè)頁(yè)面甩苛。
例子：動(dòng)態(tài)切換template形式組件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button @click="activeobj='runoob'">切換到頁(yè)面1</button>
<button @click="activeobj='runoob2'">切換到頁(yè)面2</button>
<!-- <runoob></runoob> -->
<!--這個(gè)位置變成動(dòng)態(tài)切換的-->
<component :is="activeobj"></component>
</div>
<template id="temp1">
<div>
<h1>我是第一行內(nèi)容</h1><br>
<h2>我是第2行</h2>
</div>
</template>
<template id="temp2">
<div>
<h1>temp2我是第一行內(nèi)容</h1><br>
<h2>temp2我是第2行</h2>
</div>
</template>
<script>
//Vue.component(componentname,options)
Vue.component('runoob', {
template: '#temp1'
})
Vue.component('runoob2', {
template: '#temp2'
})
var vue1 = new Vue({
el: '#app',
data:{activeobj:'runoob2'}
})
</script>
</body>
</html>