1、父 ===> 子
//父組件:
<template>
<div class="sign-up-box">
<sign-up :banding="true" :ishideBanPage="hideBanPage"></sign-up>
</div>
</template>
<script>
import signUp from "@/views/activity/signUp"; //引入子組件
export default {
data() {
},
components: {
signUp //註冊子組件
},
methods: {
// 定義父組件方法
hideBanPage() {
console.log('調用父組件方法')
}
}
};
</script>
父組件把變量banding 和方法ishideBanPage 傳給子組件,子組件接收變量和方法並調用:
//子組件:
<template>
</template>
<script>
export default {
props: ["banding", "ishideBanPage"], //用props接收父組件傳來的值
data() {
},
mounted() {
//調用
console.log( this.banding);
this.ishideBanPage();
},
methods: {
}
};
</script>
2、子 ===> 父 (以下參考文章:https://segmentfault.com/a/1190000010530600?utm_source=tag-newest)
通過$on和$emit方法:
*通過$on,$emit*
**父組件代碼**
<template>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</template>
<script>
import ButtonCounter from './buttonCounter'
export default {
name: 'index',
components: {
'button-conuter': ButtonCounter
},
data () {
return {
total: 0
}
},
methods: {
incrementTotal () {
this.total++
}
}
}
</script>
**子組件代碼**
<template>
<button @click="incrementCounter">{{counter}}</button>
</template>
<script>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
this.$emit('increment')
this.counter++
}
}
}
</script>
3、 非父子:(以下方法請教同事嘉偉)
簡單情況下我們可以通過使用一個空的Vue實例作爲中央事件總線,(這裏也可以使用app實例,而不需要新建一個空Vue實例)
**main.js**
let bus = new Vue()
Vue.prototype.bus = bus
//組件A
<template>
<div>
</div>
</template>
<script>
export default {
data: function() {
return {
}
},
beforeDestroy() {
//爲了確保另一個組件中能夠收到信息,信息從beforeDestroy裏發送
this.bus.$emit('userMsg', 'hi'); //向另一個組件發送信息
}
}
</script>
//組件B
<template>
<div>
</div>
</template>
<script>
export default {
data: function() {
return {
}
},
created() {
//接收信息
this.bus.$on('userMsg', function(msg) {
console.log(msg) // hi
})
},
beforeDestroy() {
//銷燬
this.bus.$off('userMsg')
}
}
</script>