vue个人学习笔记——vue-cli各组件之间的事件调用

69 阅读 0 评论 46 点赞

我是靠谱客的博主快乐煎蛋，最近开发中收集的这篇文章主要介绍vue个人学习笔记——vue-cli各组件之间的事件调用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

- 工具准备
- 子组件children1的内部调用
- 父组件调用子组件
- 子组件调用父组件
- 子组件之间的互相调用（完整代码）

工具准备

1.搭建好的vue-cli
2.app.vue父组件，children1   children2 两个子组件

子组件children1的内部调用

子组件children1代码

<template>
<div>
  <button @click="childevent_inside">
    子组件1调用内部function
  </button>
</div>
</template>

<script>

  export default {
    name: 'children1',

    methods:{
      childevent_inside (){
          alert('子组件1调用内部function成功');
      }
  }
</script>

<style scoped>

</style>

然后将其在父组件app.vue中使用即可

父组件调用子组件

父组件app.vue调用子组件children1.vue的function
在上面的children1代码methods中，加入

father_children (){
        alert("父组件调用子组件1成功");
      },

然后在app.vue父组件调用组件children1的时候，加上ref=’ ’

<children1 ref="child123"></children1>

在app.vue中的methods中写入

 father_children1 (){
      this.$refs.child123.father_children()
    },

child123与调用子组件中ref=''内容对应，father_children()则是子组件中要被触发的函数

子组件调用父组件

子组件children2.vue调用父组件app.vue的function
子组件children2.vue代码

<template>
  <div>
    <button @click="test1">
    子组件2调用父组件
    </button> 
  </div>

</template>

<script>
  export default {
    name: 'children2',
    methods:{
      test1(){
        this.$emit('child2_father')
      }
    }
  }
</script>

<style scoped>

</style>

在children2该组件内写一个button来触发test1函数，函数内执行this.$emit('child2_father')，然后还要在app.vue中调用children2子组件的时候，加上@child2_father="children2_father"，其中children2_father为父组件app.vue中的函数。

子组件之间的互相调用（完整代码）

举例：子组件children2调用子组件children1中的function
思路：通过上面的两种调用方法，可以先用子组件children2调用父组件app.vue中的function A()，然后通过这个function A()来触发调用子组件children1中的函数，从而达到子组件children2调用子组件children1中的function的效果

子组件chilren1完整代码

<template>
<div>
  <button @click="childevent_inside">
    子组件1调用内部function
  </button>
</div>
</template>

<script>

  export default {
    name: 'children1',

    methods:{
      childevent_inside (){
          alert('子组件1调用内部function成功');
      },
      father_children (){
        alert("父组件调用子组件1成功");
      },

      children2_children1(){
        alert("子组件2调用子组件1成功");
      }
    },

  }
</script>

<style scoped>

</style>

子组件children2完整代码

<template>
  <div>
    <button @click="test1">
    子组件2调用父组件
    </button>
    <button @click="test2">
      子组件2调用子组件1
    </button>
  </div>

</template>

<script>
  export default {
    name: 'children2',
    methods:{
      test1(){
        this.$emit('child2_father')
      },
      test2(){
        this.$emit('child2_child1')
      }
    }
  }
</script>

<style scoped>

</style>

父组件app.vue完整代码

<template>
  <div>
    <children1 ref="child123"></children1>
    <button @click="father_children1">
    父组件调用子组件
    </button>
    <children2 @child2_father="children2_father" @child2_child1="children2_children1"></children2>
  </div>

</template>
<script>
import children1 from './components/children1'
import children2 from './components/children2'
export default {
  components: {
    children1,
    children2,
  },

  methods:{
    father_children1 (){
      this.$refs.child123.father_children()
    },

    children2_father(){
      alert("子组件2调用父组件成功");
    },

    children2_children1(){
      console.log("子组件2调用父组件成功，接下来由该方法调用子组件1");
      this.$refs.child123.children2_children1()
    }
  },
}

</script>