在子組件中建立props,而後建立一個名爲 ‘img-src’ 的數據名html
//子組件BigImg.vue
<template> <!-- 過渡動畫 --> <transition name="fade"> <div class="img-view" @click="bigImg"> <!-- 遮罩層 --> <div class="img-layer"></div> <div class="img"> <img :src="img-src"> </div> </div> </transition> </template> <script> export default { props: ['img-src'], methods: { } } </script>
在父組件中註冊子組件,並在template中加入子組件標籤,標籤中添加img-src屬性並賦值vue
<template>
<div class="">
<v-head></v-head>
<big-img v-if="showImg" :img-src="imgSrc"></big-img>
</template>
<script> import vHead from '../components/Header' import BigImg from '../components/BigImg' export default { name: 'Home', components: { vHead,BigImg }, data() { return { showImg:false, imgSrc: '' } } </script>
在子組件中建立一個按鈕,給按鈕綁定一個點擊事件ios
在響應該點擊事件的函數中使用$emit來觸發一個自定義事件,並傳遞一個參數vuex
// 發送事件 this.$emit('clickit')
在父組件中的子標籤中監聽該自定義事件並添加一個響應該事件的處理方法npm
<big-img @clickit="viewImg"></big-img>
clickImg(e) { this.showImg = true; // 獲取當前圖片地址 console.log(e); this.imgSrc = e.currentTarget.src; }
http://www.javashuo.com/article/p-xhqyxikg-ee.htmlaxios
兩個組件 A和B,A組件經過query把orderId傳遞給B組件(觸發事件能夠是點擊事件、鉤子函數等)api
this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳轉到B
在B組件中獲取A組件傳遞過來的參數、緩存
this.$route.query.orderId
安裝vuexapp
npm install vuex --save
1.在src目錄下新建store文件夾並在該文件夾下新建index.js文件。 在 store/index.js寫入:異步
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ strict:true, // 開啓嚴格模式 確保state 中的數據只能 mutations 修改 state:{ count:0 } }) export default store;
在main.js中引入:
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
此時能夠在組件中使用 this.$store.state.count
獲取store中state的值。如:
// 在組件的computed中使用 computed:{ count(){ return this.$store.state.count; } }
<template> <div class="hello"> <h2>{{count}}</h2> </div> </template> <script> export default { name: 'HelloWorld', computed:{ count(){ return this.$store.state.count; } } } </script>
不少時候我們要對state裏的值進行操做,在vuex提供了一個方法mutations
在store/index.js中寫入:
// ... state:{ count:0 }, mutations:{ // 更改數據的方法 add(state){ state.count++ }, //提交載荷用法 // add(state,n){ // state.count += n // }, sub(state){ state.count-- } } ... //
在組件中使用mutations中對應的方法
<template> <div class="hello"> <button @click="add">+</button> <h2>{{count}}</h2> <button @click="sub">-</button> </div> </template> <script> export default { name: 'HelloWorld', computed:{ count(){ return this.$store.state.count; } }, methods:{ add(){ this.$store.commit('add'); }, //提交載荷用法 // add(){ // this.$store.commit('add',10); // }, //對象風格的提交方式 // store.commit({ // type: 'add', // n: 10 // }) sub(){ this.$store.commit('sub'); } } } </script>
此時就能夠對count進行修改了。
補充1:mutation接收單個參數和多個參數
利用$store.commit 裏面 寫參數至關於 mutation的函數名字
在組件裏面: 第一種方式: this.$store.commit("addIncrement",{name:'stark',age:18,n:5}) 第二種方式: this.$store.commit({ type:"addIncrement", n:5, age:18, name:'stark.wang' })
在vuex裏面接收:接收第二個參數至關於前面傳過來的參數,若是多個這個就是對象,若是是一個參數,這個第二個參數payload就是前面的參數,例如
let store = new Vuex.Store({ state: { num: 100 }, mutations: { // 任什麼時候候改變state的狀態都經過提交 mutation 來改變 // 裏面能夠定義多個函數,當觸發這個函數就會改變state狀態 addIncrement(state, stark) { console.log(stark); // 接收一個state做爲參數, 至關於上面的state // 在vuex裏面接收:接收第二個參數至關於前面傳過來的參數,若是多個這個就是對象,若是是一個參數,這個第二個參數payload就是前面的參數。 // mutations設計原則是同步的 //state.num += stark; state.num += stark.n; }, minIncrement(state) { state.num -= 5; } } })
補充2:遇到在組件input中直接修改state中數據的問題
在組件中寫入
<div class="form-control amis-control"> <input name="name" placeholder="" type="text" autocomplete="off" :value="activeFormData.title" @input="updataMessage($event,'t1.title')"> </div>
<script>
...
computed:{
activeFormData(){
return this.$store.state.formData.t1
}
},
methods:{
updataMessage(e,dataposition){
let newposition = dataposition.split('.);
this.$store.commit('updataMessage',{newval:e.target.value,curposition:newposition})
}
}
</script>
在store.js中寫入
mutations:{ ... updataMessage(state, stark) { if (stark.curposition.length == 2) { state.formData[stark.curposition[0]][stark.curposition[1]] = stark.newval } else if (stark.curposition.length == 3) { state.formData[stark.curposition[0]][stark.curposition[1]][stark.curposition[2]] = stark.newval } }, }
當你想異步操做的時候,因爲mutation必須是同步的這一點,此時不能採用mutation對state 進行修改。action派上用場了,action就是一個函數集合,在裏面怎麼操做均可以,只要最後觸發mutation 就能夠了。
註解mutation不能異步操做的緣由: mutations: { add (state) { api.callAsyncMethod(() => { state.count++ }) } }
在store/index.js中寫入
mutations:{ // 更改數據的方法 add(state){ state.count++ }, sub(state){ state.count-- } }, ++++ actions:{ addAction(context){ // context 與 store 實例具備相同方法和屬性(但不是store 實例) setTimeout(()=>{ context.commit('add'); },1000) } } ++++
組件中使用getters裏對應的方法:
<template> <div class="hello"> <button @click="add">+</button> ++++ <button @click="add_action">action +</button> ++++ <h2>{{count}}</h2> <button @click="sub">-</button> <div> test: {{doneTodos[0].text}} <br> length: {{doneTodosLength}} </div> </div> </template> export default { methods:{ add(){ this.$store.commit('add'); // console.log(this); }, sub(){ this.$store.commit('sub'); }, ++++ add_action(){ this.$store.dispatch('addAction'); } ++++ } }
實際異步操做
組件methods中:
在store/index.js中引入axios :
import axios from 'axios'
看到這裏有沒有想過當咱們使用state中某一個數據時,咱們只想用該數據中符合條件的數據。好比:
state:{ count:0, todos: [ { id: 1, text: 'text1--true', done: true }, { id: 2, text: 'text2--false', done: false } ] }
官方解釋:Vuex 容許咱們在 store 中定義「getter」(能夠認爲是 store 的計算屬性)。就像計算屬性同樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變纔會被從新計算。
mutations:{ // 更改數據的方法 add(state){ state.count++ }, sub(state){ state.count-- } }, +++ getters:{ // 用法相似組件中的 computed, 能夠認爲是store的計算屬性 doneTodos:state => { // Getter 接受 state 做爲其第一個參數: return state.todos.filter(todo => todo.done) // -> [{ id: 1, text: 'text1--true', done: true }] }, // Getter 也能夠接受其餘 getter 做爲第二個參數 doneTodosLength:(state,getters) => { return getters.doneTodos.length // -> 1 }, +++ }
在組件中使用getter對應的方法:
<template> <div class="hello"> <button @click="add">+</button> <h2>{{count}}</h2> <button @click="sub">-</button> +++ <div> test: {{doneTodos[0].text}} <br> length: {{doneTodosLength}} </div> +++ </div> </template> <script> export default { //... computed:{ +++ doneTodos(){ return this.$store.getters.doneTodos // -> [{ id: 1, text: 'text1--true', done: true }] }, doneTodosLength(){ return this.$store.getters.doneTodosLength // -> 1 } +++ } } </script>