vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作
我們在使用vue開發(fā)過程中會遇到這樣的情況，在父組件中引入了子組件，需要將父組件的值傳到子組件中顯示，同時子組件還可以更改父組件的值。
以我目前的一個項目的開發(fā)為例，如下圖頁面：
在父組件中，我引入了兩個子組件，一個是左邊的導航欄，還有中間的一個富文本編譯器組件，當我點擊左邊導航欄時，中間的頁面會切換，也就是改變引入的子組件。
怎么實現(xiàn)呢，首先，設(shè)置在該頁面index.vue中設(shè)置一個變量index，左邊導航欄每一項也對應一個index值，導航菜單綁定select函數(shù)，@select="handleSelect"，@是v-on的簡寫。
handleSelect函數(shù)接收到參數(shù)，然后發(fā)射出去，再由父組件接收就可以了。
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.changeIndex(keyPath[1])
},
changeIndex:function(key) {
this.$emit("IndexChanged",key)
}
this.$emit("IndexChanged",key)就是將key的值傳到一個叫IndexChanged函數(shù)中，
在index.vue綁定IndexChanged接收值，<Aside v-on:IndexChanged="change($event)"> </Aside>然后調(diào)用change函數(shù)，注意$event是固定寫法,接收的就是子頁面?zhèn)鬟^來的key。然后就可以通過這個key改變index用來切換頁面了。
下面通過一個更加簡單直觀的例子講解一下，新建一個Test.vue:
<template>
<div id="app">
</div>
</template>
<script>
export default{
name:'Test',
mounted() {
},
}
</script>
<style>
</style>
再建一個Test2.vue:
<template>
</template>
<script>
export default {
name: "Test2"
}
</script>
<style scoped>
</style>
Test.vue是父組件，Test2.vue是子組件，下面先給Test配置路由，以便在瀏覽器上可以訪問，為Test2定義模板，可以在Test中使用。
在router/index.js中添加下面代碼
import Test from "../components/Test";
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/t',
name: 'Test',
component: Test
}
]
})
在main.js中，添加下面代碼：
import Test2 from "./components/Test2";
Vue.use(Test2)
new Vue({
el: '#app',
router,
components: {
App,
"Test2":Test2
},
template: '<App/>'
})
現(xiàn)在在test2頁面寫上這樣一句，
<template>
<div>
{{text2}}
</div>
</template>
<script>
export default {
name: "Test2",
data(){
return{
text2:"這是Test2頁面"
}
}
}
</script>
<style scoped>
</style>
在test中引入test2，同時也定義一個變量text，然后顯示在頁面上，代碼如下：
<template>
<div id="app">
{{text1}}
<Test2></Test2>
</div>
</template>
<script>
import Test2 from "./Test2";
export default{
name:'Test',
components: {Test2},
data(){
return{
text1:"這是Test1頁面"
}
},
mounted() {
},
}
</script>
<style>
</style>
瀏覽器訪問http://localhost:8080/t,頁面如下：
現(xiàn)在要實現(xiàn)Test2接收Test1的值并顯示：
綁定數(shù)據(jù)用v-bind
<Test2 v-bind:text1="text1"></Test2>
傳的數(shù)據(jù)是Test頁面的text1，命名也是text1，可以不同，但接收時的名字和第一個要相同。
Test2頁面要接收數(shù)據(jù)啊，通過props接收：
props: ['text1'],
接收之后可以把它傳給text2，也可以直接在頁面顯示：
<template>
<div>
{{text2}}
{{text1}}
</div>
</template>
<script>
export default {
name: "Test2",
props: ['text1'],
data(){
return{
text2:"這是Test2頁面"
}
}
}
</script>
<style scoped>
</style>
接收到text1值了，怎么同步更改呢，需要再綁定一個函數(shù)，如下：
<Test2 v-bind:text1="text1" v-on:textChanged="change($event)"></Test2>
....
methods: {
change(msg){
this.text1 = msg;
}
},
在test2中，將值發(fā)射到textChanged就可以了
mounted() {
this.$emit("textChanged","我改了text1的值")
}
補充知識：在vue中使用vuex，修改state的值
1、 安裝 vuex
npm install vuex -S
2、在目錄下創(chuàng)建store文件
3、 在store.js編輯一個修改state的方法
然后在mian.js中全局引入
最后在組件中使用
這個的功能是運用mutations 修改state中的值
以上這篇vue實現(xiàn)兩個組件之間數(shù)據(jù)共享和修改操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue給對象添加屬性沒有響應式的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
如何利用vue-cli監(jiān)測webpack打包與啟動時長
這篇文章主要給大家介紹了關(guān)于如何利用vue-cli監(jiān)測webpack打包與啟動時長的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-02-02
vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)
這篇文章主要介紹了vue中使用百度腦圖kityminder-core二次開發(fā)的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要介紹了vue指令做滾動加載和監(jiān)聽等，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
本文將對于Vue 2.5.3版本中使用的Virtual Dom進行分析。updataChildren是Diff算法的核心，所以本文對updataChildren進行了圖文的分析。下面通過本文給大家分享Vue 2.5的Diff算法，需要的朋友參考下吧2017-11-11
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue視圖不更新情況詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別
這篇文章主要介紹了vue create、vue webpack init創(chuàng)建vue項目產(chǎn)生的項目文件的區(qū)別及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
在Vue 中,可以使用 props 向子組件傳遞數(shù)據(jù)，下面這篇文章主要給大家介紹了關(guān)于vue父組件通過props如何向子組件傳遞方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
Vue+ElementUI?實現(xiàn)分頁功能-mysql數(shù)據(jù)
這篇文章主要介紹了Vue+ElementUI?實現(xiàn)分頁查詢-mysql數(shù)據(jù)，當數(shù)據(jù)庫中數(shù)據(jù)比較多時,就每次只查詢一部分來緩解服務(wù)器和頁面壓力。這里使用elementui的?Pagination?分頁?組件,配合mysql的limit語句，實現(xiàn)分頁查詢mysql數(shù)據(jù),下面來看看具體實現(xiàn)過程,希望對大家學習有所幫助2021-12-12