Vue—組件傳值及vuex的使用


一、父子組件之間的傳值

1.父組件向子組件傳值:

  1. 子組件在props中創建一個屬性,用以接收父組件傳來的值
  2. 父組件中注冊子組件
  3. 在子組件標簽中添加子組件props中創建的屬性
  4. 把需要傳給子組件的值賦給該屬性

在子組件中創建props,然后創建一個名為 ‘img-src’ 的數據名

//子組件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屬性並賦值

<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>

2.子組件向父組件傳值

  • 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
  • 將需要傳的值作為$emit的第二個參數,該值將作為實參傳給響應自定義事件的方法
  • 在父組件中注冊子組件並在子組件標簽上綁定對自定義事件的監聽

在子組件中創建一個按鈕,給按鈕綁定一個點擊事件

在響應該點擊事件的函數中使用$emit來觸發一個自定義事件,並傳遞一個參數

// 發送事件
this.$emit('clickit')

在父組件中的子標簽中監聽該自定義事件並添加一個響應該事件的處理方法

<big-img @clickit="viewImg"></big-img>

clickImg(e) {
    this.showImg = true;
    // 獲取當前圖片地址
    console.log(e);
    this.imgSrc = e.currentTarget.src;
}
在通信中,無論是子組件向父組件傳值還是父組件向子組件傳值,他們都有一個共同點就是有中間介質,子向父的介質是自定義事件,父向子的介質是props中的屬性。抓准這兩點對於父子通信就好理解了

https://www.cnblogs.com/daiwenru/p/6694530.html

二、通過路由帶參數傳值

兩個組件 A和B,A組件通過query把orderId傳遞給B組件(觸發事件可以是點擊事件、鈎子函數等)

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳轉到B

在B組件中獲取A組件傳遞過來的參數、

this.$route.query.orderId

三、安裝、使用 vuex

 安裝vuex

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

mutations用法(使用mutations可以修改state的值)

在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++
   })
  }
}
現在想象,我們正在 debug 一個 app 並且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄,devtools 都需要捕捉到前一狀態和后一狀態的快照。然而,在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成:因為當 mutation 觸發的時候,回調函數還沒有被調用,devtools 不知道什么時候回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。
 

Action 用法

在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 }
    ]
  }
此時我們只想獲取state.todos中done為true的數據時我們應該怎么獲取?
可能會有以下兩種方案:
1.每個在組件中首先獲取todos,然后使用filter方法過濾;
2.寫一個公共函數在每個組件中調用以下;
如果用到todos中done為true的組件很多,這兩種方法都是很不理想的。Vuex為此為我們引入了一個方法Getter。
 

Getter 用法

官方解釋:Vuex 允許我們在 store 中定義“getter”(可以認為是 store 的計算屬性)。就像計算屬性一樣,getter 的返回值會根據它的依賴被緩存起來,且只有當它的依賴值發生了改變才會被重新計算。

在store\index.js寫入:
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>

作者:朴樹-
鏈接:https://juejin.im/post/5bf7c4375188254b9d0935c9
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM