Vue +父组件调用子组件方法 + 子组件回调父组件方法

Posted 做猪呢,最重要的是开森啦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue +父组件调用子组件方法 + 子组件回调父组件方法相关的知识,希望对你有一定的参考价值。

0. 整体代码:

 【父组件】:

<template>
    <div>
      <span style="color: red">-------------------------------------------</span><br>
      <span style="color: red">这是父组件页面</span>&emsp;
      <button @click="clickParentMethod">点击</button>
      <SubComponent ref="SubComponent" @callParentMethod="callParentMethod" trans-data="传递的参数"/>
    </div>
</template>

<script>
import SubComponent from "@/components/SubComponent";

export default {
  name: "SideOne",
  components: { SubComponent },
  methods: {
    clickParentMethod () {
      console.log('clickParentMethod')
      this.$refs.SubComponent.callSubMethod()
    },
    callParentMethod (val) {
      console.log('callParentMethod: ' + val)
    }
  }
}
</script>

 【子组件】:

<template>
  <div>
    <span>-------------------------------------------</span><br>
    <span>这是子组件页面</span>&emsp;
    <button @click="clickSubMethod">点击</button>
  </div>
</template>

<script>
export default {
  name: "SubComponent",
  props: {
    transData: {
      type: String
    }
  },
  methods: {
    clickSubMethod() {
      console.log('clickSubMethod')
      this.$emit('callParentMethod','回调的参数')
    },
    callSubMethod() {
      console.log('callSubMethod: ' + this.transData)
    }
  }
}
</script>

1. 要点:

<SubComponent ref="SubComponent" @callParentMethod="callParentMethod" trans-data="传递的参数"/>

【整体效果】:

 1.1. 父组件调用子组件方法:
  • 子组件标签添加ref属性,值为子组件,如ref=“SubComponent”
  • 父组件this.$refs.SubComponent.callSubMethod()调用子组件方法
 1.2. 子组件回调父组件方法:
  • 子组件标签绑定回调方法,如@callParentMethod=“callParentMethod”
  • 子组件 this.$emit(‘callParentMethod’,‘回调的参数’)回调父组件方法
  • 子路由回调父路由同样适用,在< router-view > 标签内绑定回调方法即可
 1.3. 父组件传递参数给子组件:
  • 子组件标签绑定参数变量和传递的值,如trans-data=“传递的参数”,也可以使用:transData='param’形式,param要在data中定义
  • 子组件使用props来接收

以上是关于Vue +父组件调用子组件方法 + 子组件回调父组件方法的主要内容,如果未能解决你的问题,请参考以下文章

Vue +父组件调用子组件方法 + 子组件回调父组件方法

Vue父组件调用子组件事件的两种方法

vue 父组件调用子组件方法

Vue2 $emit传函数类型回调获取父组件参数

vue组件之间传值常用

React组件间通信