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

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