vue組件之間的通信
14
前言
作為一個vue初學者不得不瞭解的就是組件間的數據通信(暫且不談vuex)。通信方式根據組件之間的關係有不同之處。組件關係有下面三種：父-->子、子-->父、非父子
父-->子
父向子傳遞數據通過props
**父組件代碼**
<template>
<header-box>
import Header from './header'
export default {
name: 'index',
components: {
'header-box': Header
},
data () {
return {
showTitleTxt: '首頁'
}
}
}
**子組件代碼**
<template>
<header>
{{thisTitleTxt}}
export default {
name: 'header-box',
props: {
titleTxt: String
},
data () {
return {
thisTitleTxt: this.titleTxt
}
}
}
子-->父
子組件向父組件傳遞分為兩種類型。
1、子組件改變父組件傳遞的props（你會發現通過props中的Object類型參數傳輸數據，可以通過子組件改變數據內容。這種方式是可行的，但是不推薦使用，因為官方定義prop是單向綁定）
2、通過$on和$emit
*通過props實現傳遞*
**父組件代碼**
<template>
<header-box>
import Header from './header'
export default {
name: 'index',
components: {
'header-box': Header
},
data () {
return {
showTitleTxt: {
name: '首頁'
}
}
}
}
**子組件代碼**
<template>
<header>
{{thisTitleTxt.name}}
export default {
name: 'header-box',
props: {
titleTxt: Object
},
data () {
return {
thisTitleTxt: this.titleTxt.name
}
},
metheds: {
changeTitleTxt () {
this.titleTxt.name = '切換'
}
}
}
*通過$on,$emit*
**父組件代碼**
<template>
{{ total }}
<button-counter>
**子組件代碼**
<template>
<button>{{counter}}/<button>
export default {
name: 'button-counter',
data () {
return {
counter: 0
}
},
metheds: {
incrementCounter () {
this.$emit('increment')
this.counter++
}
}
}
非父子
簡單情況下我們可以通過使用一個空的Vue實例作為中央事件總線
**main.js**
let bus = new Vue()
Vue.prototype.bus = bus
**header組件**
<template>
<header>{{title}}/<header>
**footer組件**
<template>
<footer>{{txt}}/<footer>
閱讀更多 紛亂的雨季 的文章
