vue中$emit的使用进行父子间数据传递

最新推荐文章于 2023-03-16 10:04:52 发布

weixin_44204580

最新推荐文章于 2023-03-16 10:04:52 发布

阅读量287

点赞数

文章标签： $emit vue

本文链接：https://blog.csdn.net/weixin_44204580/article/details/88057876

版权

vue中$emit的使用进行父子间数据传递

子组件

<template>
  <div class="child">
    我是子组件
    <button @click="send">点击我向父组件传递数据</button>
  </div>
</template>

<script>
  export default {
    name: "Demo",
    methods: {
      send () {
        this.$emit('send', '我是子组件的数据')
      }
    }
  }
</script>

父组件

<template>
  <div class="parent">
    我是父组件
    <child @send="send"></child>
  </div>
</template>

<script>
  import Child from './Child'
  export default {
    name: "Parent",
    components: {
      Child
    },
    methods: {
      send (data) {
        console.log(data)
      }
    }
  }
</script>
## 结果展示
点击按钮```button```,就可以看到父组件打印出来的数据```我是子组件的数据```
https://img-blog.csdnimg.cn/20190301143027253.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDIwNDU4MA==,size_16,color_FFFFFF,t_70