vue 父子组件之间通信的方法汇总

在 Vue 中，父子组件之间的通信可以通过以下几种方式实现：

父组件获取子组件传递方法和属性值

使用 props

父组件通过 props 向子组件传递数据和方法。
ParentComponent.vue

<template>  
  <div>  
    <child-component :message="parentMessage" :child-method="parentMethod" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from Parent',  
      parentMethod() {  
        console.log('Method from Parent');  
      }  
    };  
  }  
};  
</script>

ChildComponent.vue

<template>  
  <div>  
    <p>{{ message }}</p>  
    <button @click="childMethod">Click Me</button>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    message: {  
      type: String,  
      required: true  
    },  
    childMethod: {  
      type: Function,  
      required: true  
    }  
  }  
};  
</script>

使用 $refs

在父组件模板中，你可以使用 ref 属性给子组件设置一个引用名称。然后，在父组件的方法中，你可以通过 this.$refs 加上你设置的引用名称来访问子组件的实例。
ParentComponent.vue

<template>  
  <div>  
    <ChildComponent ref="childRef" />  
    <button @click="getChildData">获取子组件数据</button>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    getChildData() {  
      console.log(this.$refs.childRef.someMethod());  // 调用子组件方法  
      console.log(this.$refs.childRef.someData);     // 获取子组件属性值  
    }  
  }  
};  
</script>

使用自定义事件

子组件可以通过 $emit 方法触发一个自定义事件，并传递数据给父组件。
ParentComponent.vue

<template>  
  <div>  
    <ChildComponent @custom-event="handleChildData" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  methods: {  
    handleChildData(data) {  
      console.log(data);  // 输出子组件传递的数据  
    }  
  }  
};  
</script>

ChildComponent.vue

<template>  
  <div>  
    <button @click="sendDataToParent">发送数据给父组件</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      someData: '子组件数据'  
    };  
  },  
  methods: {  
    sendDataToParent() {  
      this.$emit('custom-event', this.someData);  
    }  
  }  
};  
</script>

子组件获取父组件传递方法和属性值

使用 $parent

子组件可以通过 this.$parent 访问父组件的实例，然后调用父组件的方法或获取其数据。
ChildComponent.vue

<template>  
  <div>  
    <button @click="getParentData">获取父组件数据</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    getParentData() {  
      console.log(this.$parent.someData);    // 获取父组件属性值  
      this.$parent.someMethod();             // 调用父组件方法  
    }  
  }  
};  
</script>

使用 props

父组件可以通过 props 把方法和属性传递给子组件，子组件可以直接访问这些数据。

ParentComponent.vue

<template>  
  <div>  
    <ChildComponent :some-prop="parentData" />  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentData: '父组件数据'  
    };  
  }  
};  
</script>

ChildComponent.vue

<template>  
  <div>  
    <p>{{ someProp }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  props: {  
    someProp: {  
      type: String,  
      required: true  
    }  
  }  
};  
</script>

使用自定义事件

父组件可以通过自定义事件向子组件传递方法，子组件可以通过 $emit 触发事件来调用父组件方法。
ParentComponent.vue

<template>
  <div>
    <ChildComponent @callParentMethod="parentMethod"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    parentMethod() {
      console.log('Parent Method Called');
    }
  }
};
</script>

ChildComponent.vue

<template>
  <div>
    <button @click="$emit('callParentMethod')">调用父组件方法</button>
  </div>
</template>