首頁 > 文章 > web前端 > vue的父子組件，父子組件傳值和vuex的淺析

vue的父子組件，父子組件傳值和vuex的淺析

不言原創: 2018-07-07 17:33:072824瀏覽

這篇文章主要介紹了關於vue的父子組件，父子組件傳值和vuex的淺析，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

一、vue的父子元件之間是如何傳值的？
首先呢，需要說說的是，vue既然有雙向綁定，那為何會有父子元件之間的傳值問題？這個問題也簡單，vue的元件會供其他的vue頁面進行調用，如果數組都是雙向綁定的話，那麼就容易混亂了，比如a,b頁面綁了一個num=10，那b，c頁面又綁了num=5,那vue實例的num到底聽誰的？所以，這就是vue官網為什麼說
元件之間的資料只能是單項流通的，而且由父元件傳遞給子元件
好，接下來就話不多說了，父子元件是如何傳值的，而且誰是父誰是子呢？
範例1：先寫一個元件放在component資料夾下叫son.vue好了（有點劇透的命名...）

<template>
  <p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是son的num：{{num}}</p>
  </p>
</template>
<script>
export default {
  //props:["num"],//接收父组件传递过来的值，这里我先写上
  data () {
    return {
        num:0
    }
  },
   methods:{
       add(){//es6的语法相当于add:function(){}
           this.num++;
       },
       minu(){
           this.num--;
       }
   }
}
</script>

這個son.vue的元件相信大家都看得懂，加減num的組件。接下來寫一個index.vue呼叫son.vue

//index.vue
<template>
  <p>
    <son v-bind:num="num"></son>//传递一个值给son.vue，这时候可以把son.vue的props那个注释注销掉了
    <p class="text-link">这里是index的num：{{num}}</p>
  </p>
</template>
<script>
import son from './../components/son' 
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
     }
}
</script>

這時候兩個num都是10。再點擊加減按鈕，我們會發現，‘son的num’一直有變化，而‘index的num’一直是10，這就是數據的單項流通。那我們要如何點擊按鈕然後改變‘index的num’呢？這時候，需要$emit工作了。

我們需要在index.vue裡改動一下程式碼
首先：

<son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>//v-on:add="icr"就是绑定一个自定义事件

再增加

methods:{
   icr(){
       this.num++;
   },
   der(){
       this.num--;
   }
}

然後在son.vue中methods變成

methods:{
   add(){
       this.$emit("add");//$emit("add")就是触发父组件中的add方法
   },
   minu(){
       this.$emit("minu");
   }
}

所以，$emit("xxx")觸發了父元件的函數，改變了父元件的data的num值，父元件再透過props傳值給子元件。從而實現資料傳遞，父子元件通訊。
這是son.vue和index.vue的完整程式碼

//son.vue
<template>
<p>
    <button class="test-btn" @click="add">+</button>
    <button class="test-btn" @click="minu">-</button>
    <p class="text-link">这里是{{num}}</p>
</p>
</template>
<script>
export default {
  props:["num"],
  data () {
    return {
        num:10
    }
  },
   methods:{
       add(){
           this.$emit("add");
       },
       minu(){
           this.$emit("minu");
       }
   }
}
</script>

//index.vue
<template>
 <p>
    <son v-bind:num="num" v-on:add="icr" v-on:minu="der"></son>
    <p class="text-link">父{{num}}</p>
</p>
</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

二、說說vuex以及他的state、actions、getters、mutations、modules、store
#首先，vuex官網上說是一個vue的狀態管理工具。可能狀態比較難理解，大家可以簡單地把狀態理解成為vue的data裡面的變數。當元件之間的data變數關係複雜一點的時候，就把其中的變數抽離出來管理。剛好大家可以看看上面，父子元件之間的num之間的通訊是不是比較麻煩，改變數據還要用$emit。如果有一個地方跟倉庫一樣就存放著num的值，誰要用誰去請求num的值，誰想改就改該多好是吧，vuex就是乾這個的，有點全域變數的意思。任何組件需要拿，改東西，都可以找他。

1、首先state是惟一的資料載體，跟倉庫一樣。
2、而mutations是唯一可以改變state的值的東東，使用commit等。
這兩個是vuex最最基礎缺一不可的。簡單的vuex管理就使用這兩個就行，如何使用vuex？看這裡https://segmentfault.com/a/11...
3、getters的官方說明：衍生出新的狀態，這個比較難理解。簡單來說，就是過濾，組合！
比如說state裡面存了一個數組，數組有好多個數據，而我只想要用status：0的那些個，就可以用getters。是不是有點過濾的意思。所以getters有時候還很好用，很有必要！。
4、actions是用來提交mutations，wtf？怎麼感覺那麼多餘！其實不是的，這個actions最重要的是可以包含非同步操作。如何非同步操作就不示範了，因為大家可能很多情況都不會使用它。
5、modules也是輔助方法。例如modulesA有一個完整的state、actions、getters、mutations；modulesB也可以有一個完整的state、actions、getters、mutations，他就是將store分割成模組，避免混淆。

好了，今天就說這一些，還是需要自己多看官網文檔，多實踐。跪求各位大牛指導！學習真難，求帶我...

最後還是說一下，如果文章對你有幫助的話，請給我一個star鼓勵一下，我還沒工作呢。。。嗚嗚嗚

</template>
<script>
import son from './../components/son'
export default {
  data () {
    return {
      num:10
    }
  },
  components:{
       son
   },
   methods:{
       icr(){
           this.num++;
       },
       der(){
           this.num--;
       }
   }
}
</script>

二、说说vuex以及他的state、actions、getters、mutations、modules、store
首先，vuex官网上说是一个vue的状态管理工具。可能状态比较难理解，大家可以简单地把状态理解成为vue的data里面的变量。当组件之间的data变量关系复杂一点的时候，就把其中的变量抽离出来管理。刚好大家可以看看上面，父子组件之间的num之间的通信是不是比较麻烦，改变数据还要用$emit。如果有一个地方跟仓库一样就存放着num的值，谁要用谁去请求num的值，谁想改就改该多好是吧，vuex就是干这个的，有点全局变量的意思。任何组件需要拿，改东西，都可以找他。

1、首先state是惟一的数据载体，跟仓库一样。
2、而mutations是唯一可以改变state的值的东东，使用commit等。
这两个是vuex最最基础缺一不可的。简单的vuex管理就使用这两个就行，如何使用vuex？看这里https://segmentfault.com/a/11...
3、getters的官方说明：派生出新的状态，这个比较难理解。简单来说，就是过滤，组合！
比如说state里面存了一个数组，数组有好多个数据，而我只想要用status：0的那些个，就可以用getters。是不是有点过滤的意思。所以getters有时候还很好用，很必要！。
4、actions是用来提交mutations，wtf？怎么感觉那么多余！其实不是的，这个actions最重要的是可以包含异步操作。如何异步操作就不演示了，因为大家可能很多情况都不会使用它。
5、modules也是辅助方法。比如modulesA有一个完整的state、actions、getters、mutations；modulesB也可以有一个完整的state、actions、getters、mutations，他就是将store分割成模块，避免混淆。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

vue的父子組件，父子組件傳值和vuex的淺析

相關文章