Vue組件傳值的五種方法

Vue.js是一款流行的前端JavaScript框架，它是基於組件化思想構建的。組件作為頁面上的一部分，可以接收和發送數據。在Vue.js中，組件傳值的方式可以使用以下五種方法。

一、Props傳值

Props是Vue.js中父組件向子組件傳值的一種方法。它通過在子組件上綁定屬性名，再在父組件中通過該屬性名傳值，完成父子組件間的數據通信。

// 子組件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

// 父組件
<template>
  <div>
    <child-component :message="propMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        propMessage: 'Hello, Vue Props!'
      }
    }
  }
</script>

上面的代碼中，子組件通過props屬性定義了一個屬性message，用於接收來自父組件傳遞的數據。在父組件中，通過<child-component :message=”propMessage”></child-component>指令將父組件的data中的propMessage傳遞給子組件。在子組件中，通過<p>{{ message }}</p>語法輸出來自父組件的數據。

二、Vuex狀態管理傳值

Vuex是Vue.js的一種狀態管理模式，它可以幫助我們管理組件的共享狀態。在Vuex中，使用state來管理組件的狀態，使用mutation來定義修改state的方法，使用getters來獲取state的值。

// store.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'Hello, Vuex!'
  },
  mutations: {
    updateMessage (state, newMessage) {
      state.message = newMessage
    }
  },
  getters: {
    getMessage (state) {
      return state.message
    }
  }
})

export default store

// 子組件
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
  import { mapState, mapMutations, mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapState(['message']),
      ...mapGetters(['getMessage'])
    },
    methods: {
      ...mapMutations(['updateMessage'])
    }
  }
</script>

// 父組件
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'
  import store from 'store.js'

  export default {
    components: {
      ChildComponent
    },
    store
  }
</script>

上面的代碼中，通過Vuex將子組件和父組件連接起來。子組件中展示了來自Vuex的message狀態值，並定義了一個updateMessage方法用於更新message的值。在父組件中，將store配置到Vue實例中，並在<child-component />中使用子組件。

三、$emit傳值

$emit是Vue.js中子組件向父組件傳遞數據的一種方式。子組件使用$emit方法，向父組件觸發自定義事件，並傳遞需要傳遞的數據。

// 子組件
<template>
  <div>
    <button @click="$emit('update', 'Hello, Vue $emit!')">Update Message</button>
  </div>
</template>

// 父組件
<template>
  <div>
    <child-component @update="handleUpdate"></child-component>
  </div>

  <script>
    import ChildComponent from 'child-component.vue'

    export default {
      components: {
        ChildComponent
      },
      methods: {
        handleUpdate (message) {
          console.log(message)  // 輸出 "Hello, Vue $emit!"
        }
      }
    }
  </script>

上面的代碼中，子組件中通過<button @click=”$emit(‘update’, ‘Hello, Vue $emit!’)”>Update Message</button>語法觸發了父組件中的自定義事件update，並向父組件傳遞了數據”Hello, Vue $emit!”。父組件中通過"update"事件接收到子組件傳遞的數據，並執行handleUpdate方法對數據處理。

四、provide / inject傳值

在Vue.js中，provide用於注入信息，inject用於獲取provide中的信息。provide和inject組合起來，可以實現父組件向多級子組件傳遞數據的功能。

// 子組件1
<template>
  <div>
    <p>{{ message }}</p>
  </div>
<template>

<script>
  export default {
    inject: ['message']
  }
</script>

// 子組件2
<template>
  <div>
    <child-component1 />
  </div>
</template>

<script>
  import ChildComponent1 from 'child-component1.vue'

  export default {
    components: {
      ChildComponent1
    }
  }
</script>

// 父組件
<template>
  <div>
    <child-component2 :message="parentMessage" />
  </div>
</template>

<script>
  import ChildComponent2 from 'child-component2.vue'

  export default {
    components: {
      ChildComponent2
    },
    provide () {
      return {
        message: 'Hello, Vue provide / inject!'
      }
    },
    data () {
      return {
        parentMessage: 'Hello, Vue parentMessage!'
      }
    }
  }
</script>

上面的代碼中，父組件通過<child-component2 :message=”parentMessage” />向子組件2傳遞了parentMessage數據，子組件2通過provide返回message數據。子組件1通過inject獲取到了message數據，並渲染出”Hello, Vue provide / inject!”的值。

五、$parent和$children傳值

$parent和$children使我們可以在父子組件中獲取到實例，進而實現父子間傳值的功能。

// 父組件
<template>
  <div>
    <child-component />
  </div>
</template>

<script>
  import ChildComponent from 'child-component.vue'

  export default {
    components: {
      ChildComponent
    },
    data () {
      return {
        parentMessage: 'Hello, Vue $parent / $children!'
      }
    },
    mounted () {
      this.$children[0].showMessage()
    }
  }
</script>

// 子組件
<template>
  <div>
  </div>
</template>

<script>
  export default {
    methods: {
      showMessage () {
        console.log(this.$parent.parentMessage)  // 輸出 "Hello, Vue $parent / $children"
      }
    }
  }
</script>

上面的代碼中，父組件中渲染了子組件，父組件的data中定義了一個parentMessage屬性，用於傳遞數據給子組件。在父組件mounted生命周期函數中，通過訪問this.$children[0]獲取到子組件實例，調用子組件中定義的showMessage方法，在方法中使用this.$parent.parentMessage通過$parent獲取到父組件實例，並獲取父組件實例中的parentMessage屬性值。