Vue父子组件通讯方式及实现-CSDN博客

本文链接：https://blog.csdn.net/weixin_42560424/article/details/131353791

文章详细介绍了Vue中三种常见的父子组件间通信方式：1)使用props从父组件向子组件传递数据，子组件通过$emit触发父组件的方法；2)通过$parent和$children属性直接访问父组件或子组件实例；3)利用$refs直接引用子组件并调用其方法。这些机制是Vue中实现组件间交互的关键。

摘要由CSDN通过智能技术生成

`68. Vue父子组件通讯方式及实现`

`1. props和$emit`

父组件通过props向子组件传递数据，子组件通过$emit触发父组件定义的事件来传递数据。

父组件：

<template>
  <div>
    <child-component :message="message" @update-message="updateMessage"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

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

<script>
export default {
  name: 'ChildComponent',
  props: ['message'],
  methods: {
    updateMessage() {
      this.$emit('update-message', 'New Message');
    }
  }
}
</script>

`2. $parent和$children`

父组件可以通过$children属性获取到所有子组件的实例，并通过$parent属性获取到自己的父组件实例。

父组件：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>

子组件：

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

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage() {
      this.$parent.updateMessage('New Message');
    }
  }
}
</script>

`3. $refs`

父组件可以通过ref属性给子组件设置一个引用，然后通过$refs获取到子组件的实例，从而调用子组件的方法或者访问子组件的属性。

父组件：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent
  },
  methods: {
    updateMessage() {
      this.$refs.child.updateMessage('New Message');
    }
  }
}
</script>

子组件：

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

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      message: 'Hello World!'
    }
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  }
}
</script>