Vue 中的 this.$emit 子组件向父组件传值 使用方法

在vue cli 项目中使用

要使用的组件 内容

<template>
  <div>
    <!-- 在input标签 用 v-model 双向数据绑定 取value值   用 value()  中 this.$emit 传值 -->
    <input type="text" v-model="valuemsg" @keyup="value(valuemsg)">
  </div>
</template>
<script>
export default {
  methods: {
    value (vl) {
      this.$emit('strmsg', vl) // this.$emit(自定义父组件将用的事件名, 要传的数据)
    }
  },
  data () {
    return {
      valuemsg: ''
    }
  }
}
</script>

父组件的内容

<template>
  <div>
    <div>
      <!-- zja-menu 便是利用 上面页面 创建的全局 组件 （自定义标签）这里不多介绍
      用刚才自定义的事件 @strmsg  来接收 数据 -->
      <zja-menu @strmsg="listmsg"></zja-menu>
      <div>{{msg}}</div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    listmsg (vl) {
      this.msg = vl
      console.log(vl)
    }
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>