Vue组件通信——父子组件通信的四种方法

黑猫_默雨

已于 2023-01-30 10:40:04 修改

阅读量1.6w

点赞数 13

分类专栏： Vue 文章标签： vue.js 前端

于 2022-07-13 22:55:55 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44001906/article/details/125770169

版权

本文详细介绍了Vue中父子组件通信的四种方法：1) 使用props属性绑定实现父组件向子组件传递数据；2) 通过监听子组件事件，使子组件向父组件传递数据并触发父组件方法；3) 利用$refs来访问子组件的数据和方法，需注意其非响应式特性；4) 子组件通过$parent可以直接访问父组件的数据和方法。文章还涉及了props的更多写法，包括字符串数组形式、指定类型和验证要求，以及.prop双向绑定和.sync修饰符的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入组件

全局引入

在main.js文件中引入并注册

import ChildrenDemo from '@/views/components/ChildrenDemo'
Vue.component('ChildrenDemo',ChildrenDemo)// 第一个参数 全局组件的名字(字符串类型)，第二个参数：引入的组件名（一般都与组件名保持一致）

之后就可以全局使用组件了

局部引入

在父组件中引入

import ChildrenDemo from '@/views/components/ChildrenDemo'
export default {
     
  components: {
     
    ChildrenDemo
  },
}

之后就可以在父组件中使用组件了

<ChildrenDemo></ChildrenDemo>
<!-- 或 -->
<children-demo></children-demo>

一、props属性绑定（父组件向子组件传递数据）

在子组件 prop 中可以注册一些自定义组件属性，父组件调用子组件时可以向 prop 中的自定义属性传值。

子组件代码：

<template>
  <div class="ChildrenDemo">
    <h1>{
  {title}}</h1>
  </div>
</template>

<script>
export default {
     
  name: 'ChildrenDemo',
  props:['title'],
  components: {
     
  },
  data () {
     
    return {
     
    }
  }
}
</script>

父组件代码

<template>
  <div class="parent">
    <ChildrenDemo title="向子组件传递的title值"></ChildrenDemo>
  </div>
</template>

prop 也可以通过 v-bind 动态赋值

<ChildrenDemo :title="xxx"></ChildrenDemo>

如果要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind

例如，对于一个给定的对象 post

最低0.47元/天解锁文章