Vue父子组件相互调用方法

Vue父子组件通信

原创已于 2022-03-26 01:46:38 修改 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件 #调用

于 2019-10-09 17:17:55 首次发布

vue 专栏收录该内容

53 篇文章

订阅专栏

本文详细介绍Vue.js中子组件如何调用父组件的方法，包括使用this.$parent, this.$emit和父组件通过props传递方法给子组件三种方式。同时，也介绍了父组件调用子组件方法的途径。

一、子调父

方法一：this.$parent.method

父组件

<template>
  <div>
    <child/>
  </div>
</template>
<script>
  import Child from '@/components/Child';
  export default {
    components: {
      Child
    },
    methods: {
      say(msg) {
        console.log(msg);
      }
    }
  };
</script>

子组件

<template>
  <button @click="$parent.say('hello')">测试</button>
</template>
<script>
  export default { };
</script>

方法二：this.$emit(‘fatherMethod’)

父组件

<template>
  <div>
    <child @say="test"/>
  </div>
</template>
<script>
  import Child from '@/components/Child';
  export default {
    components: {
      Child
    },
    methods: {
      test(msg) {
        console.log(msg);
      }
    }
  };
</script>

子组件

<template>
  <button @click="$emit('say', 'hello')">测试</button>
</template>
<script>
  export default { };
</script>

方法三：父组件通过props传给子组件

父组件

<template>
  <div>
    <child :say="say"/>
  </div>
</template>
<script>
  import Child from '@/components/Child';
  export default {
    components: {
      Child
    },
    methods: {
      say(msg) {
        console.log(msg);
      }
    }
  };
</script>

子组件

<template>
  <button @click="say('hello')">测试</button>
</template>
<script>
  export default {
    props: {
      say: {
        type: Function
      }
    } 
  };
</script>