在vue組件中傳遞資料步驟詳解

這次帶給大家在vue組件中傳遞資料步驟詳解，在vue組件中傳遞資料的注意事項有哪些，以下就是實戰案例，一起來看一下。

Vue 的元件作用域都是孤立的，不允許在子元件的範本內直接引用父元件的資料。必須使用特定的方法才能實現元件之間的資料傳遞。元件之間傳遞資料大致分為三種情況：

父元件向子元件傳遞數據，透過 props 傳遞資料。

子元件向父元件傳遞數據，透過 events 傳遞資料。

兩個同級元件之間傳遞數據，透過 event bus 傳遞數據。

一、父元件傳遞資料

子元件部分：

<template>
  <p class="child">
    {{ msg }}
  </p>
</template>
<script>
export default {
 name: 'child',
 data(){
  return {
  
  }
 },
 props: ['msg']
</script>

在child. vue中，msg實在data中定義的變量，使用props：['msg']從父元件中取得msg的值

父元件部分：

<template>
  <p class="child">
    child
    <child :msg="message"></child>
  </p>
</template>
<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   message: 'hello vue'
  }
 }
}
</script>

在呼叫元件的時候，使用v-bind將msg的值綁定為parent.vue中定義的變數message，這樣就能將parent.vue中的message的值傳給child.vue了。

單一項目資料流

當父元件的 message 發生改變，子元件也會自動更新

檢視

。但是在子元件中，我們不要去修改 prop。如果你必須要修改到這些數據，你可以使用以下方法：

方法一：把prop 賦值給一個局部變量，然後需要修改的話就修改這個局部變量，而不影響prop

export default {
  data(){
    return {
      newMessage: null
    } 
  },
  props: ['message'],
  created(){
    this.newMessage = this.message;
  }
}

方法二：在計算

屬性中對prop 進行處理

export default {
  props: ['message'],
  computed: {
    newMessage(){
      return this.message + ' 哈哈哈';
    }
  }
}

二、子元件傳遞資料

#子元件主要透過實踐傳遞資料給父元件的

子元件部分：

<template>
  <p class="child">
   <span>用户名：</span>
   <input v-model="username" @change="sendUser" />
  </p>
</template>

子元件的html中，當input中的值改變時，將username傳遞給parent.vue。 先宣告了一個sendUser方法，用change

事件

來呼叫sendUser。

<script>
 export default {
  name: 'parend',
  data () {
   return {
     username: ''
   }
  },
  methods: {
   sendUser () {
    this.$emit('changeName', this.username)
   }
  }
}
</script>

在sendUser中，使用$emit來遍歷changeName事件，並傳回this.name，其中changeName是一個自訂的事件，功能類似於中轉，this.name將透過這個事件傳遞給父組件。

父元件部分：

<template>
  <p class="parent">
    <child @changeName="getUser"></child>
    <p>用户名：{{user}}</p>
  </p>
</template>

在父元件中宣告了一個getUser方法，用changeName事件呼叫getUser方法，取得從子元件傳遞過來的參數username

<script>
import child from './child.vue'
export default {
 name: 'parent',
 components: { child },
 data () {
  return {
   user: ''
  }
 },
 methods: {
  getUser(data) {
   this.user = data
  }
 }
}
</script>

# getUser方法中的參數msg就是從子元件傳遞過來的參數uesrname。

三、同級元件間的資料傳遞

##########有時候兩個元件也需要通訊（非父子關係）。當然Vue2.0提供了Vuex，但在簡單的場景下，可以使用一個空的Vue實例作為中央事件匯流排。 ###

<template>
  <p id="app">
    <c1></c1>  //组件1
    <c2></c2> //组件2
  </p>
</template>

###元件c1中：###

<template>
  <p class="c1">
    page
    <button @click="changeMsg">click</button>
  </p>
</template>
<script>
var Bus = new Vue(); //为了方便将Bus（空vue）定义在一个组件中，在实际的运用中一般会新建一Bus.js
export default {
 name: 'c1',
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {  //点击按钮，将this.message传递给c2
   bus.$emit('sendMsg', this.message)
  }
 }
}
</script>

###元件c2中：###

<template>
  <p class="c2">
    {{msg}}
  </p>
</template>
<script>
var Bus = new Vue();
export default {
 name: 'c2',
 data () {
  return {
   msg: ''
  }
 },
 created () {
  bus.$on('sendMsg',(data)=>{  //data即为c1组件中的message
   this.msg = data
  })
 }
}
</script>

###在實際運用中，一般將bus抽離出來：###

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

###元件呼叫時引用（import Bus from './Bus.js'）######但這種引入方式，經過webpack打包後可能會出現Bus局部作用域的情況，即引用的是兩個不同的Bus，導致無法正常通訊###實際運用：######將Bus注入到Vue根物件中###

import Vue from 'vue'
const Bus = new Vue()
var app= new Vue({
  el:'#app',
　　 data:{
　　　　Bus
  }　　
})

###在子元件中透過###this.$root.Bus.$on() ,this.$root.Bus.$emit()###來呼叫######相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########vue使用自訂icon圖示步驟解析################Vue2x圖片預覽外掛程式使用步驟詳解## #######

以上是在vue組件中傳遞資料步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！