vue使用emit子组件给父组件传值

父组件

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/home">进入主页</router-link>
      <h1>parent父组件</h1>
      <!-- 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法 -->
      <child v-on:listenToChildEvent="showMsgFromChild"></child>
    </div>
    <router-view />
  </div>
</template>

<script>
import child from './Card'
export default {
  name: 'Welcome',
  data() {
    return {}
  },
  components: {
    child
  },
  created() {},
  mounted() {},
  methods: {
    showMsgFromChild(msg) {
      console.log(msg)
      alert(msg)
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
</style>

子组件

<template>
  <div>
    <!-- <h3>卡片视图页面</h3> -->
    <h3>主页</h3>
    <h1>child子组件</h1>
    <button @click="sendMsgToParent">向父组件传值</button>
  </div>
</template>

<script>
export default {
  name: 'Card',
  data() {
    return {}
  },
  components: {},
  created() {},
  mounted() {},
  methods: {
    sendMsgToParent() {
      //在响应 该点击事件的函数中使用  $emit 来触发一个自定义事件，并传递参数
      this.$emit('listenToChildEvent', 'this message is from child,我是子组件传来的值')
    }
  },
  computed: {}
}
</script>

<style scoped lang="scss">
</style>