Vue技術棧開發學習之狀態管理bus的使用

Bus

1新建組件store.vue,在路由列表註冊,並在components目錄下新建一個組件AInput.vue（本身 建立的組件最好帶上前綴）

{

path:'/store',

component:()=>import('@/views/store.vue')

}

components的AInput.vue

<template>

<input @input="handleInput" :value="value">//綁定input事件和value值

</template>

<script>

export default{

name:'AInput',

props:{

value:{ // 屬性value

type:[String,Number],

default:''

},

methods:{

handleInput(event){

const value = event.target.value//獲取文本框輸入值

this.$emit('input',value)//把獲取到的值傳出去

//注意爲何不能直接在這裏修改value值，這是vuex強調的單向數據流，父級組件之間傳值，值的修改必定是經過父組件，若是向組件與子組件傳值必定是經過屬性，而子組件想修改父組件傳來的值必定要經過事件方式來修改

}

}

}

}

</script>

store.vue

<template>

<div>

//使用input組件

<a-input v-model='inputValue' />//v-model雙向綁定(至關於語法糖，至關於 ：value="inputValue" @input="handleInput")

{{ inputValue }}//顯示inputValue

</div>

</template>

<script>

import AInput from '_c/AInput.vue' //引入組件

export default{

name:'store',

components:{ //註冊組件

AInput

},

data(){

return {

inputValue:''

}

}

}

</script>

實現過程input標籤綁定handleInput事件，當input值修改時會觸發input裏的事件，從而執行handleInput方法，值的顯示是經過value

兄弟之間通訊

新建components組件 Ashow.vue

<template>

{{ content }}

</template>

<script>

export default{

props:{

content:{ // 屬性value

type:[String,Number],

default:''

}

</script>

在store.vue引Ashow.vue註冊組件

import Ashow from '_c/Ashow.vue'

<a-show :content="inputValue" />

<!----->

//跨文件之間如何通訊：使用bus

定義文件夾bus,並建立index.js文件

import Vue from 'vue'//引入Vue

const Bus = new Vue()//建立實例

export default Bus//導出

而後在main.js把bus引入 import Bus from './bus'

Vue.prototype.$bus = Bus //在Vue的原型對象上添加Bus(把bus註冊到根實例)

在以前Vue技術棧開發學習，Vue路由學習基礎篇建立的email.vue添加

<button @click="handleClick">點擊我</button>

export default{

methods:{

handleClick(){

this.$bus.$emit('on-click','hahaha')//傳到bus

}

}

mount(){//生命週期

console.log(this.$bus)//建立一個空的bus實例，來做爲交互的中介

}

}

在以前Vue技術棧開發學習，Vue路由學習基礎篇建立的phone.vue用來接收email的事件

例如顯示message

{{ message }}

export default{

data(){

return {

message:''

}

},

mount(){//生命週期

this.$bus.$on('on-click',mes=>{//bus事件監聽

this.message = mes

})

}

}

優化bus

不把bus單獨放一個文件夾 bus/index.js重命名爲bus.js並一直lib文件夾下，引入是路徑改成./lib/bus

寶寶起名-更懂年輕父母的起名顧問