我們?cè)谑褂胿ue開(kāi)發(fā)過(guò)程中會(huì)遇到這樣的情況，在父組件中引入了子組件，需要將父組件的值傳到子組件中顯示，同時(shí)子組件還可以更改父組件的值。

以我目前的一個(gè)項(xiàng)目的開(kāi)發(fā)為例，如下圖頁(yè)面：

在父組件中，我引入了兩個(gè)子組件，一個(gè)是左邊的導(dǎo)航欄，還有中間的一個(gè)富文本編譯器組件，當(dāng)我點(diǎn)擊左邊導(dǎo)航欄時(shí)，中間的頁(yè)面會(huì)切換，也就是改變引入的子組件。

怎么實(shí)現(xiàn)呢，首先，設(shè)置在該頁(yè)面index.vue中設(shè)置一個(gè)變量index，左邊導(dǎo)航欄每一項(xiàng)也對(duì)應(yīng)一個(gè)index值，導(dǎo)航菜單綁定select函數(shù)，@select='handleSelect'，@是v-on的簡(jiǎn)寫(xiě)。

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的值傳到一個(gè)叫IndexChanged函數(shù)中，

在index.vue綁定IndexChanged接收值，<Aside v-on:IndexChanged='change($event)'> </Aside>然后調(diào)用change函數(shù)，注意$event是固定寫(xiě)法,接收的就是子頁(yè)面?zhèn)鬟^(guò)來(lái)的key。然后就可以通過(guò)這個(gè)key改變index用來(lái)切換頁(yè)面了。

下面通過(guò)一個(gè)更加簡(jiǎn)單直觀(guān)的例子講解一下，新建一個(gè)Test.vue:

<template> <div id='app'> </div></template><script> export default{ name:’Test’, mounted() { }, }</script><style></style>

再建一個(gè)Test2.vue:

<template></template><script> export default { name: 'Test2' }</script><style scoped></style>

Test.vue是父組件，Test2.vue是子組件，下面先給Test配置路由，以便在瀏覽器上可以訪(fǎng)問(wèn)，為T(mén)est2定義模板，可以在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頁(yè)面寫(xiě)上這樣一句，

<template><div> {{text2}}</div></template><script> export default { name: 'Test2', data(){ return{ text2:'這是Test2頁(yè)面' } } }</script><style scoped></style>

在test中引入test2，同時(shí)也定義一個(gè)變量text，然后顯示在頁(yè)面上，代碼如下：

<template> <div id='app'> {{text1}} <Test2></Test2> </div></template><script> import Test2 from './Test2'; export default{ name:’Test’, components: {Test2}, data(){ return{ text1:'這是Test1頁(yè)面' } }, mounted() { }, }</script><style></style>

瀏覽器訪(fǎng)問(wèn)http://localhost:8080/t,頁(yè)面如下：

現(xiàn)在要實(shí)現(xiàn)Test2接收Test1的值并顯示：

綁定數(shù)據(jù)用v-bind

<Test2 v-bind:text1='text1'></Test2>

傳的數(shù)據(jù)是Test頁(yè)面的text1，命名也是text1，可以不同，但接收時(shí)的名字和第一個(gè)要相同。

Test2頁(yè)面要接收數(shù)據(jù)啊，通過(guò)props接收：

props: [’text1’],

接收之后可以把它傳給text2，也可以直接在頁(yè)面顯示：

<template><div> {{text2}} {{text1}}</div></template><script> export default { name: 'Test2', props: [’text1’], data(){ return{ text2:'這是Test2頁(yè)面' } } }</script><style scoped></style>

接收到text1值了，怎么同步更改呢，需要再綁定一個(gè)函數(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的值') }

補(bǔ)充知識(shí)：在vue中使用vuex，修改state的值

1、 安裝 vuex

npm install vuex -S

2、在目錄下創(chuàng)建store文件

3、 在store.js編輯一個(gè)修改state的方法

然后在mian.js中全局引入

最后在組件中使用

這個(gè)的功能是運(yùn)用mutations 修改state中的值

以上這篇vue實(shí)現(xiàn)兩個(gè)組件之間數(shù)據(jù)共享和修改操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。