Vue 子组件调用父组件方法总结

20,733 阅读1分钟

hello world

好久没有写博客了,今天看到掘金有人写总结下Vue组件方法标题,回想了一下总结的知识,感觉自己有些遗忘,就写下此篇复习下,结果发现之前总结方法都能写出来。这些比较以前的了,最近又好久没学习。如果还有什么其他方法,求赐教。代码是纯Markdown写的,可能代码会写错。如果看到的也麻烦提个醒

常用的方法总结下

  • $emit
  • $parent
  • prop
  • vuex(vuex代码比较麻烦,不写了,说下步骤吧 dispatch:actions=>commit:mutations)

$parent方法

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father组件');
      }
    }
  }
</script>

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$parent.fatherMethod()
      }
    }
  }
</script>

$emit方法

父组件

<template>
  <div>
    <child @callFather="activeSon"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father组件');
      },
      activeSon(){
        this.fatherMethod()
      }
    }
  }
</script>

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$emit("callFather")
      }
    }
  }
</script>

$prop方法

父组件

<template>
  <div>
    <child :activeSon="fatherMethod()"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father组件');
      }
    }
  }
</script>

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
  props:{
    activeSon:  {
        type: Function,
        default: null
      }
  },
    methods: {
      activeBtn() {
        this.activeSon()
      }
    }
  }
</script>