Vue $emit $refs子父组件间方法的调用

r囧r小猫 2021-12-03 06:31 280阅读 0赞

### 1、$emit ###

#### 子组件调用父组件的方法并传递数据 ####

#### 子组件： ####

<template>
      <button @click="emitEvent">点击我</button>
    </template>
    <script>
      export default {
        data() {
          return {
            msg: "我是子组件中的数据"
          }
        },
        methods: {
          emitEvent(){
            this.$emit('my-event', this.msg)
            //通过按钮的点击事件触发方法，然后用$emit触发一个my-event的自定义方法，传递this.msg数据。
          }
        }
      }
    </script>

#### 父组件： ####

<template>
      <div id="app">
        <child-a @my-event="getMyEvent"></child-a>
        
      </div>
    </template>
    <script>
      import ChildA from './components/child.vue'
      export default {
        components: {
          ChildA
        },
        methods: {
          getMyEvent(msg){
              console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
          }
        }
      }
    </script>

### 2、$refs ###

#### 父组件调用子组件的方法，可以传递数据 ####

#### 父组件： ####

<template>
      <div id="app">
        <child-a ref="child"></child-a>
        
        <button @click="getMyEvent">点击父组件</button>
      </div>
    </template>
    <script>
      import ChildA from './components/child.vue'
      export default {
        components: {
          ChildA
        },
        data() {
          return {
            msg: "我是父组件中的数据"
          }
        },
        methods: {
          getMyEvent(){
              this.$refs.child.emitEvent(this.msg);
              //调用子组件的方法，child是上边ref起的名字，emitEvent是子组件的方法。
          }
        }
      }
    </script>

#### 子组件： ####

<template>
      <button>点击我</button>
    </template>
    <script>
      export default {
        methods: {
          emitEvent(msg){
            console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据
          }
        }
      }
    </script>

转载于:https://www.cnblogs.com/IT123/p/11053186.html