1.父組件傳遞數據給子組件
parent組件中：
<template lang="html">
<div class="">
<Child :message="message" /> //顯示出來，並動態綁定數據
</div>
</template>
import Child from "../pages/child"; //引入子組件
data(){
return{
message:"我是parent傳給child的信息" //初始化數據
}
},
components:{
Child //註冊Child組件
},
Child組件中：
props:{
message:{
type:String,
default:""
}
}//用props接收數據，注意，它與data同級
2.子組件傳遞數據給父組件
Child組件中：
<template lang="html">
<button @click="sendmsg" type="button" name="button">send</button>
</template>
<script>
data(){
return{
msg:"我是來child的msg"
}
},
methods:{
sendmsg(){
this.$emit("getMsg",this.msg) //$emit自定義事件
}
}
</script>
parent組件中：
<template lang="html">
<Child @getMsg="getMsg" />
</template>
<script>
import Child from "../pages/child";
data(){
msg:""
},
components:{
Child
},
methods:{
getMsg(data){
this.msg=data;
}
}
</script>
3.非父子組件之間的通信
假設 bb 組件裏面有個按鈕，點擊按鈕，把 123 傳遞給 aa 組件
在main.js文件中：
// 根組件（this.$root)new Vue({
el: '#app',
router,
render: h => h(App),
data: {
// 空的實例放到根組件下，所有的子組件都能調用
Bus: new Vue()
}
})
bb 組件內調用事件觸發↓
<button @click="submit">提交<button>
methods: { submit() { // 事件名字自定義，用不同的名字區別事件 this.$root.Bus.$emit('eventName', 123) } }
aa 組件內調用事件接收↓
// 當前實例創建完成就監聽這個事件
created(){
this.$root.Bus.$on('eventName', value => {
this.print(value)
})
},
methods: {
print(value) {
console.log(value)
}
},
// 在組件銷燬時別忘了解除事件綁定
beforeDestroy() {
this.$root.Bus.$off('eventName')
},
問題一：如果有多個組件組件需要通信，只要保證事件名 （eventName）不一樣就行了。
問題二：爲什麼要弄個 Bus？直接 this.$root.$on、this.$root.$emit 不更簡單粗暴？
按照文檔上的說法是專門用一個空的 Vue 實例（Bus）來做中央事件總線更加清晰也易於管理。
4.動態路由傳遞參數
1.配置路由信息，參數用：表示
path:"/hi/:id/:count"
2.配置路由跳轉路徑信息
<router-link :to="{ name:'hi',params:{id:'100',count:20} }">hi</router-link>
3.讀取信息
{{ $route.params.鍵名 }}-{{ $route.params.鍵名}}
在router/index.js文件中配置路由
import Foo from '../pages/foo'
routes: [
{
path: '/foo/:name/:age',
component: Foo
}
]
在main.js中
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>' //第一層路由必須顯示在App.vue中
})
在App.vue 中
<p>
<router-link to="/foo/lihua/18">/foo/username</router-link>
</p>
<router-view></router-view>
//『路徑參數』：『路徑參數』使用冒號 : 標記。當匹配到一個路由時，參數值會被設置到 this.$route.params，可以在每個組件內使用。
APP.vue主組件中，內容上就只有<router-view></router-view>，然後在其他頁面也有<router-view></router-view>，它是怎麼傳遞的？
正常寫法中，一層路徑(/xxx)對應一個router-view。
比如url: /a/b/c (假設a、b、c都爲正常路徑，不會作爲參數)
- 那/a對應的就是App.vue中的router-view，/a進入a.vue中
- 那/a/b對應的就是a.vue中的router-view， /a/b進入b.vue中，以此類推。
4.vuex狀態的共享
應用的場景有：購物車、登錄/退出狀態、音樂播放時候、複雜的折線圖
在main.js中：
import store from "./store"
new Vue({
el: '#app',
router,
store, //注入store
components: { App },
template: '<App/>'
})
在store/index.js中
import Vue from "vue"
import VueX from "vuex"
Vue.use(VueX);
export default new VueX.Store({
//初始化倉庫中的數據
state:{
},
actions:{
updataOrder(context,數據){
//提交到mutations中,第一個參數是mutions中函數，第二個是數據
context.commit("updataOrder",數據)
}
},
mutations:{
//計算操作，updataOrder方法中第一個參數是store初始化數據，第二個是頁面傳來的數據
updataOrder(state,data){
}
},
getters:{
// store 中定義“getter”（可以認爲是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被重新計算。
//一般不直接的讀取store.state
getOrder(state){
return state.order
}
}
})
在某個需要交互的組件中觸發actions
methods:{
down(){
if(this.counter<=this.min){
return
}
this.counter--;
//分發到mutations中，用dispatch方法去觸發，第一個參數是actions中方法，第二個是數據；
this.$store.dispatch("updataOrder", 數據);
}
}
在任一組建使用store.getters.方法名
<div class="">
{{getOrder}}
</div>
<script>
computed:{
// 爲了能夠使用 `this` 獲取局部狀態，必須使用常規函數
getOrder(){
return this.$store.getters.getOrder;
}
}
</script>
VueComponent ->(dispatch) Actions ->(Commit) Mutations ->(Mutate) State ->(Render) -> VueComponent
6.vuex也支持Modules：
在store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import mutations from "./mutations"
import getters from "./getters"
import actions from "./actions"
Vue.use(Vuex)
// 創建Store
export default new Vuex.Store({
state:state,
mutations:mutations,
getters:getters,
actions:actions
})
在等待被引入的state.js中
export default {
//初始化state
}
在等待被引入的actions.js中
export default{
// 異步處理
adds(context，數據){
//異步操作，拿數據。
setTimeout(function(){
context.commit("add"，數據)
})
}
}
在等待被引入的mutations.js中
export default{
add(state,數據){
// 變更狀態
state.count++
}
}
在等待被引入的getters.js中
export default {
// 數據過濾
getState(state){
if(state.count >= 0){
return state.count
}else{
state.count = 0
return 0
}
}
}
在任一組建使用store.getters.方法名
<div class="">
{{getOrder}}
</div>
<script>
computed:{
// 爲了能夠使用 `this` 獲取局部狀態，必須使用常規函數
getOrder(){
return this.$store.getters.getState;
}
}
</script>