Vue3.0父子組件傳值詳解

一、Vue父子組件傳值屬性

在Vue中，父組件向子組件傳值是一種很基礎的要求，下面我們來看一個簡單的例子，通過props屬性實現父組件向子組件傳遞數據：

// Parent.vue
<template>
  <Child :message="hello"></Child>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        hello: 'Hello, child!'
      }
    }
  }
</script>

// Child.vue
<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    name: 'Child',
    props: {
      message: String
    }
  }
</script>

上述代碼中，我們在父組件中定義了一個名為hello的數據，並將其通過:綁定到子組件的message屬性上。在子組件中，我們通過props屬性定義了一個名為message的屬性，並指定其類型為String。

需要注意的是，在Vue中，使用props屬性定義的屬性都是單向綁定的，也就是說，當父組件更新了這個屬性的值時，子組件的值也會更新，但是反過來是不行的。如果需要實現雙向數據綁定，需要使用v-model指令或者自定義事件。

二、Vue父組件向子組件傳值

在Vue3.0中，父組件向子組件傳值的方法與Vue2.x相同，可以使用props屬性來實現。

三、Vue子傳父組件傳值

1、通過$emit自定義事件

在Vue中，子組件向父組件傳值可以通過自定義事件實現。具體步驟如下：

在子組件中，通過$emit方法觸發一個自定義事件，並將需要傳遞的數據作為參數傳入。
在父組件中，通過v-on指令監聽子組件觸發的自定義事件，同時在事件處理函數中獲取子組件傳遞的數據。

下面我們來看一個簡單的例子：

// Parent.vue
<template>
  <div>
    <Child @myEvent="handleMyEvent"></Child>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleMyEvent(data) {
        this.message = data
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="$emit('myEvent', 'Hello, parent!')">傳遞數據給父組件</button>
  </div>
</template>
<script>
  export default {
    name: 'Child'
  }
</script>

上述代碼中，我們在子組件中定義了一個名為myEvent的自定義事件，並在點擊按鈕時通過$emit方法觸發了這個事件，並將字元串’Hello, parent!’作為參數傳遞給了父組件。在父組件中，我們通過v-on指令監聽了子組件觸發的myEvent事件，同時在事件處理函數handleMyEvent中獲取了子組件傳遞的數據，並將其賦值給了message。

2、通過$attrs和$listeners實現

在Vue3.0中，除了使用$emit方法觸發自定義事件，還可以通過$attrs和$listeners來實現子組件向父組件傳遞數據。

$attrs是一個包含了父作用域中不作為prop被識別（且獲取）的特性綁定（class和style除外）的對象。當一個組件沒有聲明任何prop時，這裡會包含所有父作用域的綁定（class和style除外），並且可以通過v-bind=”$attrs”傳遞給一個內部組件。例如：

// Parent.vue
<template>
  <div>
    <Child v-bind="$attrs" v-on="$listeners"></Child>
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      handleMyEvent(data) {
        this.message = data
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="$emit('myEvent', 'Hello, parent!')">傳遞數據給父組件</button>
  </div>
</template>
<script>
  export default {
    name: 'Child'
  }
</script>

四、Vuex子組件向父組件能傳值

在Vue中，除了使用自定義事件或者$attrs和$listeners來實現子組件向父組件傳遞數據之外，還可以使用Vuex來實現這個功能。

Vuex是一個專為Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，包括state、getters、mutations和actions等，使得不同組件之間可以共享狀態，從而實現更加有效的通信和協作。

下面我們來看一個簡單的例子，使用Vuex實現子組件向父組件傳遞數據：

// store.js
import { createStore } from 'vuex'

export default createStore({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

// App.vue
<template>
  <div>
    <Child />
    <p>{{ message }}</p>
  </div>
</template>
<script>
  import Child from './Child.vue'
  import store from './store'
  
  export default {
    name: 'App',
    components: {
      Child
    },
    computed: {
      message() {
        return store.state.message
      }
    }
  }
</script>

// Child.vue
<template>
  <div>
    <button @click="setMessage">傳遞數據給父組件</button>
  </div>
</template>
<script>
  import store from './store'
  
  export default {
    name: 'Child',
    methods: {
      setMessage() {
        store.commit('setMessage', 'Hello, parent!')
      }
    }
  }
</script>

上述代碼中，我們首先創建了一個名為store的Vuex Store實例，並定義了一個名為message的狀態。在父組件中，我們通過computed屬性定義了一個名為message的計算屬性，並在模板中使用它來顯示message的值。在子組件中，我們通過import引入了store，然後在點擊按鈕時通過commit方法觸發了一個mutations，從而實現了修改message的值的功能。

五、Vue3父子組件傳值

在Vue3.0中，父子組件傳值的原理與Vue2.x是相同的，但是在語法上有所變化。需要注意的是，在Vue3.0中，props屬性的寫法與Vue2.x是不同的。

在Vue3.0中，我們可以使用defineProps函數來定義子組件的props屬性：

// Child.vue
<template>
  <div>{{ message }}</div>
</template>
<script>
  import { defineProps } from 'vue'
  
  export default {
    name: 'Child',
    setup(props) {
      const { message } = defineProps({
        message: String
      })
      
      return { message }
    }
  }
</script>

// Parent.vue
<template>
  <Child :message="hello"></Child>
</template>
<script>
  import Child from './Child.vue'
  
  export default {
    name: 'Parent',
    components: {
      Child
    },
    data() {
      return {
        hello: 'Hello, child!'
      }
    }
  }
</script>

上述代碼中，我們在子組件中使用defineProps函數來定義了一個名為message的屬性，並指定了它的類型為String。在父組件中，我們通過:綁定的方式將hello數據傳遞給子組件的message屬性。

需要注意的是，在Vue3.0中，props屬性是不可變的，也就是說，如果你嘗試在子組件中修改props屬性的值，程序會報錯。如果需要在子組件中修改父組件的數據，應該使用$emit方法觸發自定義事件或者通過Vuex實現。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/249339.html