vue 父子组件通信方法

最新推荐文章于 2024-08-06 15:29:58 发布

一波万波

最新推荐文章于 2024-08-06 15:29:58 发布

阅读量806

点赞数

分类专栏： javascript vuejs 文章标签： vue父子通信

本文链接：https://blog.csdn.net/yibowanbo/article/details/79703561

版权

javascript 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

vuejs

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue中父子组件的通信方式，包括父组件如何传递数据给子组件，子组件如何调用父组件的方法，以及父组件如何操作子组件的方法，帮助开发者更好地理解和运用Vue的组件交互。

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

一、父组件给子组件传递数据

父组件传送data数据给子组件

<children :data="data">

子组件接收

export default {
  props: ['data']
}

二、子组件操作父组件的方法

父组件定义一个show的方法，并且传达给子组件，命名为@show

<children @show="show"></children>

show(){
  console.log('I am parent!');
}

子组件直接用$emit调用@show方法

this.$emit('show');

还可以传参

show(params){
  console.log(params);
}

this.$emit('show',  'I am children!');

三、父组件操作子组件的方法

父组件

<template>
  <div>
    <h1>我是父组件</h1>
    <!-- 定义子组件名字 -->
    <child ref="child"></child>
  </div>
</template>
<script>
  import child from './child'

  export default {
    components: {child},
    methods: {
      parent() {
       // $.refs调用
        this.$.refs.child.childFn()
      }
    }
  }
</script>

子组件

<template>
  <div>
    <h2>我是子组件</h2>
  </div>
</template>
<script>
  import child from './child'

  export default {
    components: {child},
    methods: {
      // 子组件的方法
      childFn() {
        alert('父组件调用了我')
      }
    }
  }
</script>