子组件向父组件传值$emit

Strawberry_ahh2024-10-15 23:31

点击子组件的按钮，将子组件的值传递给父组件，并进行提示。

子组件

javascript 复制代码

<template>
  <div>
    <button @click="emitIndex">clickme</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitIndex() {
      //$emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。
      //returnData:对应父组件的函数名
      //hello world:传递给returnData函数的值
      this.$emit('returnData', 'hello world')
    }
  }
}
</script>

父组件

javascript 复制代码

 
 <template>
  <!-- 子组件中$emit绑定的returnData事件 -->
  <childemit @returnData="returnChildData"></childemit>
</template>
<script>
// 引用子组件
import Childemit from './testComponent/childemit.vue'
export default {
  methods: {
    //returnChildData：绑定的函数
    //childStr：子组件传过来的值
    returnChildData(childStr) {
      alert('这里是父组件，接收到子组件的值为：' + childStr)
    }
  },
  // 组件注册
  components: {
    Childemit
  }
}
</script>

子组件向父组件传值$emit

子组件

父组件

效果