步驟 1: 在子組件中定義要被修改的屬性或方法

首先，在子組件中定義你想要父組件能夠修改或調用的屬性或方法。例如，我們有一個名為MyChildComponent的子組件，它有一個名為childData的數據屬性和一個名為updateData的方法。

// 子組件 MyChildComponent.vue
export default {data() {return {childData: '初始值',};},methods: {updateData(newVal) {this.childData = newVal;},},
};

步驟 2: 在父組件模板中綁定ref在父組件的模板中，你需要給子組件添加一個ref屬性，這樣你就可以通過這個引用訪問到子組件的實例。

<!-- 父組件 ParentComponent.vue -->
<template><div><my-child-component ref="childRef"></my-child-component><button @click="changeChildData">修改子組件數據</button></div>
</template>

步驟 3: 在父組件的方法中使用refs修改子組件數據然后，在父組件的JavaScript部分，你可以通過this.$refs來訪問子組件的實例，并調用其方法或修改其屬性。

// 父組件 ParentComponent.vue
export default {methods: {changeChildData() {// 確保在訪問$refs之前，子組件已經被掛載if (this.$refs.childRef) {// 調用子組件的方法更新數據this.$refs.childRef.updateData('新的值');// 或者直接修改子組件的data（這種方式不太推薦，盡量使用方法）// this.$refs.childRef.childData = '新的值';}},},
};

?注意事項:?

? ? ? ? 使用refs直接修改子組件狀態應該謹慎，因為它可能繞過了Vue的響應式系統，導致視圖不更新或其他不可預期的行為。優先考慮通過事件傳遞或使用Vuex等狀態管理庫來管理組件間通信。

????????確保在訪問$refs時，對應的組件已經被創建和掛載。在mounted生命周期鉤子或者之后的代碼中安全使用$refs。

????????直接修改子組件的data屬性雖然可以工作，但通常推薦使用公開的方法來改變狀態，以保持組件的封裝性和可維護性。