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

以我目前的一個(gè)項(xiàng)目的開發(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)寫。

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是固定寫法,接收的就是子頁(yè)面?zhèn)鬟^(guò)來(lái)的key。然后就可以通過(guò)這個(gè)key改變index用來(lái)切換頁(yè)面了。

下面通過(guò)一個(gè)更加簡(jiǎ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配置路由，以便在瀏覽器上可以訪問(wèn)，為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頁(yè)面寫上這樣一句，

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

瀏覽器訪問(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è)參考，也希望大家多多支持腳本之家。

最新評(píng)論