{{ keyword }}在Vue3父子組件傳值的實現方式

在Vue3中，父子組件是常見的組件通信方式，而實現父子組件傳值則是其中比較重要的一種應用場景。本文將從以下幾個方面來詳細介紹Vue3中實現父子組件傳值的幾種方式。

一、props

在Vue3中，props依然是一個非常重要的屬性，通過在子組件中設置props選項，可以讓父組件向子組件傳遞數據：

// 父組件傳遞數據到子組件
<template>
  <child-component :message="parentMessage">
  </child-component>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent component'
    };
  }
}
</script>

// 子組件接收props數據
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

此時，父組件向子組件傳遞了一個字符串類型的message數據，而子組件接收到該數據並直接在頁面中渲染出來。

二、依賴注入provide/inject

在Vue3新增了provide/inject選項，用於實現父組件向子孫組件傳遞數據，使用方式如下：

// 父組件提供數據
<template>
  <child-component>
  </child-component>
</template>

<script>
import { provide } from 'vue';
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const parentMessage = 'Hello from parent component';
    provide('message', parentMessage);
  }
}
</script>

// 子組件接收provide中的數據
<template>
  <grandchild-component></grandchild-component>
</template>

<script>
import { inject } from 'vue';
import GrandchildComponent from './GrandchildComponent';

export default {
  components: {
    GrandchildComponent
  },
  setup() {
    const message = inject('message');
    return {
      message
    }
  }
}
</script>

// 孫子組件中使用父組件提供的數據
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup(props, { attrs, slots, emit }) {
    // 這裡也可以使用inject來獲取到父組件提供的數據
  }
}
</script>

在父組件中使用provide來提供數據，而在子孫組件中使用inject來獲取父組件提供的數據。需要注意的是，provide/inject是依賴底層組件實例的引用來實現的，所以不能在setup函數外使用。

三、$attrs/$listeners

在Vue3中，$attrs/$listeners是一種新的組件屬性，前者獲取父組件傳遞過來的非prop屬性，後者獲取父組件傳遞過來的非prop事件，使用方式如下：

// 父組件向子組件傳遞非prop屬性和事件
<template>
  <child-component title="Hello World" @click="doSomething"></child-component>
</template>

// 子組件中使用$attrs和$listeners來訪問父組件傳遞過來的數據
<template>
  <div :title="$attrs.title" @click="$listeners.click"></div>
</template>

<script>
export default {
  inheritAttrs: false // 必須設置，否則會將所有的非prop屬性透傳到根元素上
}
</script>

這裡子組件中使用$attrs.data來訪問title屬性，$listeners.click來訪問click事件。

四、$emit

在Vue3中，$emit是一種子組件向父組件傳遞數據的方法，使用方式如下：

// 子組件向父組件傳遞數據
<template>
  <div @click="sendMessage"></div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child component');
    }
  }
}
</script>

// 父組件接收子組件傳遞過來的數據
<template>
  <child-component @message="handleMessage"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
}
</script>

子組件中通過$emit來傳遞數據，而父組件則通過@message來監聽message事件，並在回調函數中獲取到子組件傳遞過來的數據。

五、ref/$refs

在Vue3中，ref/$refs是一種組件引用方式，可以在父組件中通過ref屬性來獲取到子組件實例，從而可以調用子組件中的方法和屬性，使用方式如下：

// 父組件中獲取子組件實例
<template>
  <child-component ref="child"></child-component>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const childRef = ref(null);
    return {
      childRef
    }
  },
  mounted() {
    console.log(this.$refs.child); // 這裡也可以獲取到子組件實例
  }
}
</script>

// 子組件中可以通過this.$emit來向父組件傳遞數據
<template>
  <div></div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child component');
    }
  }
}
</script>

在父組件中，可以通過ref來獲取到子組件的實例，在子組件中則可以通過this.$emit來向父組件傳遞數據。

通過以上五種方式，我們可以在Vue3中實現父子組件之間的數據傳遞和通信。需要根據實際場景來選擇不同的實現方式，以達到更好的應用效果。