子组件使用this.$emit()向父组件传值

首先必须在父组件中引用子组件，然后实现传值

• 第一步 在父组件中引入子组件

  使用import引入组件

import Content from './Content.vue'

声明

//定义组件
export default {
    components: {
        Content,
        ...
    },
    ...
}

• 第二步 子组件向父组件传值

1. 在子组件中需要向父组件传值处使用this.$emit("function",param); //其中function为父组件定义函数，param为需要传递参数

   export default {
   methods:{
    ...
   changeMenu(){
    //点击切换按钮的时候 修改父组件的数据 isCollapse
    this.$emit('changeCollapse')
   },
    ...
   }
   }

2. 在父组件中子组件引用处添加函数v-on:function="function1"； //其中function为子组件中定义函数，function1为父组件定义函数--用于接收子组件传值并进行相应数据处理，可定义为同一名称

v-on： 可用 @ 代替 @function="function1" ，@ 为 v-on：的简写

<Content class="content" @changeCollapse="changeCollapse"/>
<Content class="content" v-on:changeCollapse="changeCollapse"/>

val及为子组件中flag，即接收的子组件参数

下面在父组件中定义changeCollapse方法：

export default {
    components: {
        MyMenu,
        Content
    },
  data(){
      return{
        isCollapse: false
      }
  },
  methods:{
    changeCollapse(){
      this.isCollapse = !this.isCollapse
    }
  }
}