vue组件传值【子组件向父组件传值】emit将子组件的参数传递给父组件

<template>
  <div>
    <!-- 子组件 -->
    <!-- 使用 $emit 将想要传递的值通过函数的形式传出,并在父组件/父文件中接收 -->
    <div>要发送给父组件的值：<span style="color:red">{{msg2}}</span></div>
    <button type="button" @click="toParent">向父组件发送信息</button>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg2:"给父组件/父文件的信息"
    }
  },
  methods:{
    /**
     * button上绑定来一个点击事件,用来触发toParent方法
     * 这一方法利用 $emit('toParent',date) 绑定传给父组件/父文件的值
     * 然后可以在父组件中使用 @toParent='method' 接受这一方法,并获得$emit返回值
     */
    toParent(){
      /**
       * 第一个参数是触发的事件名称,对应着父组件/父文件"@监听的名字"
       * 第二个参数是传给父组件的额外参数,传递多个参数可以直接传对象过去
       */
      this.$emit("toParent",this.msg2);
    }
  }
}
</script>

<style scoped lang='less'>
</style>

<template>
  <div>
    <!-- 父组件/父文件 -->
    <div>即将接收子组件传值是：<span style="color:red">{{child2Msg}}</span></div>
    <!-- 父组件中@xxx的xxx名称要和子组件this.$emit("xxx",date)的xxx名称相同 -->
    <Chuan @toParent="getMag"></Chuan>
  </div>
</template>

<script>
//引入组件
import Chuan from "../components/Chuan"
export default {
  components:{
    //注册组件
    Chuan
  },
  data(){
    return {
      child2Msg:""
    }
  },
  methods:{
    //监听子组件触发的函数,data为子组件给父组件传的值
    getMag(msg2){
      this.child2Msg = msg2
    }
  }
}
</script>

<style scoped lang='less'>
</style>