脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue.js 父子组件通信

Vue.js 中的父子组件通信方式实例教程

 更新时间：2023年09月27日 09:59:49   作者：stormjun  
在 Vue.js 中，父子组件通信是非常重要的，在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例

Vue.js 中的父子组件通信方式

在 Vue.js 中，组件是构建应用程序的基本单元。当我们在应用程序中使用组件时，组件之间的通信是非常重要的。在 Vue.js 中，父子组件通信是最常见的组件通信方式之一。在本文中，我们将讨论 Vue.js 中的父子组件通信方式，并附上代码实例。

在这里插入图片描述

父组件向子组件传递数据

Props

props 是 Vue.js 中父组件向子组件传递数据的一种方式。通过 props，父组件可以向子组件传递任何类型的数据，包括字符串、数字、对象、数组等等。在子组件中，props 是只读的，不能直接修改，只能通过事件的方式向父组件发送数据。

下面是一个使用 props 传递数据的示例：

<!-- 父组件 -->
<template>
  <div>
    <my-child :message="parentMessage"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
    };
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

在上面的示例中，父组件通过 props 将 parentMessage 传递给子组件 MyChild ，并将其命名为 message 。在子组件中，我们可以通过 props 对象来声明 message 属性，然后在模板中使用它来渲染数据。

Sync 修饰符

除了 props 之外，Vue.js 还提供了一个 Sync 修饰符，可以通过它来实现双向数据绑定。Sync 修饰符实际上是一个语法糖，它将父组件向子组件传递数据和子组件向父组件发送数据的操作包装在一起。

下面是一个使用 Sync 修饰符的示例：

<!-- 父组件 -->
<template>
  <div>
    <my-child :message.sync="parentMessage"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
    };
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <input v-model="message" @input="$emit('update:message', message)" />
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
};
</script>

在上面的示例中，父组件通过 :message.sync 将 parentMessage 传递给子组件 MyChild ，并使用 v-model 指令将子组件的 message 属性与一个输入框进行双向绑定。在子组件中，我们使用 @input 事件将输入框的值发送给父组件，实现双向数据绑定。

子组件向父组件传递数据

自定义事件

除了 props 之外，子组件还可以通过自定义事件向父组件传递数据。在子组件中，我们可以使用 $emit 方法触发一个自定义事件，并将数据作为参数传递给父组件。父组件可以通过 v-on 指令监听子组件的自定义事件，并在事件处理函数中获取子组件传递的数据。

下面是一个使用自定义事件传递数据的示例：

<!-- 父组件 -->
<template>
  <div>
    <my-child @child-click="handleChildClick"></my-child>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleChildClick(data) {
      console.log('从子组件传递过来的数据:', data);
    },
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <button @click="handleClick">点击我向父组件传递数据</button>
  </div>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-click', '这是来自子组件的消息');
    },
  },
};
</script>

在上面的示例中，子组件 MyChild 中定义了一个按钮，并在按钮的 click 事件中触发了一个自定义事件 child-click ，并将数据 '这是来自子组件的消息' 作为参数传递给父组件。父组件通过 @child-click 指令监听子组件的自定义事件，并在事件处理函数中打印子组件传递的数据。

$refs

除了自定义事件之外，子组件还可以通过 $refs 属性来访问父组件，从而向父组件传递数据。在父组件中，我们可以通过 ref 属性给子组件命名，然后在父组件中通过 $refs 属性访问子组件实例，并调用子组件中的方法或访问子组件中的数据。

下面是一个使用 $refs 传递数据的示例：

<!-- 父组件 -->
<template>
  <div>
    <my-child ref="child"></my-child>
    <button @click="handleClick">点击我向子组件传递数据</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleClick() {
      this.$refs.child.handleParentClick('这是来自父组件的消息');
    },
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    handleParentClick(data) {
      this.message = data;
    },
  },
};
</script>

在上面的示例中，父组件中通过 ref 属性给子组件命名为 child 。在父组件中，我们通过 $refs.child 访问 MyChild 组件实例，并调用子组件中的 handleParentClick 方法，将数据 '这是来自父组件的消息' 传递给子组件。在子组件中，我们将传递过来的数据赋值给 message 属性，然后在模板中渲染出来。

父子组件之间的访问

在 Vue.js 中，父组件可以通过 $children 属性访问它的所有子组件实例，而子组件可以通过 $parent 属性访问它的父组件实例。

下面是一个示例：

<!-- 父组件 -->
<template>
  <div>
    <my-child></my-child>
    <my-child></my-child>
    <button @click="handleClick">点击我访问子组件</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  methods: {
    handleClick() {
      console.log(this.$children);
    },
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: '这是来自子组件的消息',
    };
  },
  created() {
    console.log(this.$parent);
  },
};
</script>

在上面的示例中，父组件中定义了两个子组件 MyChild 。在父组件中，我们通过 $children 属性访问所有子组件，并在点击按钮时打印所有子组件实例。在子组件中，我们在 created 钩子函数中访问了父组件实例，并在模板中渲染出了一个消息。

总结

在 Vue.js 中，父子组件通信是非常重要的。在本文中，我们讨论了 Vue.js 中父子组件通信的几种方式，包括使用 props 传递数据、使用 Sync 修饰符实现双向绑定、使用自定义事件传递数据、使用 $refs 访问子组件实例以及使用 $children 和 $parent 访问父子组件实例。这些技术可以帮助我们更好地组织和管理应用程序中的组件，并提高组件之间的交互性。

在实际开发中，我们可以根据具体的业务需求选择合适的技术来实现父子组件通信。如果需要向子组件传递静态数据，可以使用 props；如果需要实现双向数据绑定，可以使用 Sync 修饰符；如果需要向父组件传递数据，可以使用自定义事件；如果需要访问子组件实例，可以使用 $refs ，如果需要访问父子组件实例，可以使用 $children 和 $parent 。

在下面的代码示例中，我们将展示如何使用 props、自定义事件和 $refs 这三种方式实现父子组件之间的通信。

<!-- 父组件 -->
<template>
  <div>
    <my-child :message="parentMessage" @child-click="handleChildClick" ref="child"></my-child>
    <button @click="handleClick">点击我向子组件传递数据</button>
  </div>
</template>
<script>
import MyChild from './MyChild.vue';
export default {
  components: {
    MyChild,
  },
  data() {
    return {
      parentMessage: '这是来自父组件的消息',
    };
  },
  methods: {
    handleChildClick(data) {
      console.log('从子组件传递过来的数据:', data);
    },
    handleClick() {
      this.$refs.child.handleParentClick('这是来自父组件的消息');
    },
  },
};
</script>
<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我向父组件传递数据</button>
  </div>
</template>
<script>
export default {
  props: {
    message: String,
  },
  methods: {
    handleClick() {
      this.$emit('child-click', '这是来自子组件的消息');
    },
    handleParentClick(data) {
      console.log('从父组件传递过来的数据:', data);
    },
  },
};
</script>

在上面的示例中，父组件通过 props 向子组件传递数据，并在子组件中使用自定义事件向父组件传递数据。同时，父组件还使用 $refs 属性访问子组件实例，并调用子组件中的方法，向子组件传递数据。

到此这篇关于Vue.js 中的父子组件通信方式的文章就介绍到这了,更多相关Vue.js 父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue使用keep-alive无效以及include和exclude用法解读

    vue使用keep-alive无效以及include和exclude用法解读

    这篇文章主要介绍了vue使用keep-alive无效以及include和exclude用法解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07
  • Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    Vue中computed(计算属性)和watch(监听属性)的用法及区别说明

    这篇文章主要介绍了Vue中computed(计算属性)和watch(监听属性)的用法及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • vue打包之后的dist文件如何运行

    vue打包之后的dist文件如何运行

    我们知道使用webpack打包vue项目后会生成一个dist文件夹,dist文件夹下有html文件和其他css、js以及图片等,那么打包后的文件该如何正确运行呢?这篇文章主要给大家介绍了关于vue打包之后的dist文件如何运行的相关资料,需要的朋友可以参考下
    2023-05-05
  • Vue 父子组件、组件间通信

    Vue 父子组件、组件间通信

    本篇文章主要介绍了Vue 父子组件、组件间通信示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Vue生态的新成员Pinia的详细介绍

    Vue生态的新成员Pinia的详细介绍

    本文主要介绍了Vue生态的新成员Pinia的详细介绍，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue对storejs获取的数据进行处理时遇到的几种问题小结

    vue对storejs获取的数据进行处理时遇到的几种问题小结

    这篇文章主要介绍了vue对storejs获取的数据进行处理时遇到的几种问题小结,需要的朋友可以参考下
    2018-03-03
  • vuex actions异步修改状态的实例详解

    vuex actions异步修改状态的实例详解

    今天小编就为大家分享一篇vuex actions异步修改状态的实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue中使用Axios最佳实践方式

    vue中使用Axios最佳实践方式

    Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，Axios 使用简单,包尺寸小且提供了易于扩展的接口，这篇文章主要介绍了vue中使用Axios最佳实践,需要的朋友可以参考下
    2022-09-09
  • vue项目页面嵌入代码块vue-prism-editor的实现

    vue项目页面嵌入代码块vue-prism-editor的实现

    这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-10-10
  • Vue3 setup 的作用实例详解

    Vue3 setup 的作用实例详解

    setup 用来写组合式 API，从生命周期的角度，相当于取代了 beforeCreate()，这篇文章主要介绍了Vue3 setup 的作用,需要的朋友可以参考下
    2022-12-12

最新评论