vue使用$emit把子组件数据传递给父组件

详细原理就不多说了，看上一篇文章即可。

封面.jpg

父子组件之间数据传递可以用于弹出层的显示隐藏。

例如在父组件里有登录按钮，点击按钮显示子组件登录框内容（父组件传递数据给子组件），点击关闭按钮则隐藏登录框（这里是子组件传递数据给父组件）。

这里我们讲的是子组件通过$emit把数据传递给父组件，因此。

//关闭按钮
<p @click="closeMyself">&times;</p>
<!--
<p @click="$emit('onClose')">&times;</p>
-->

export default {
  methods:{
    //子组件向父组件传递数据 onClose
    closeMyself(){
      this.$emit('onClose');
    }
  }
}

//这里是父组件
<v-dialog :isShow="isShowDialog" @onClose="closeDiag"></v-dialog>

//这里是父组件
import dialog from './dialog'
export default {
  components:{
    vDialog:dialog
  },
  data(){
    return{
      isShowDialog:false
    }
  },
  methods:{
    closeDiag(){
      this.isShowDialog = false
    },
  }
}

OK，大功告成~

嘿嘿.jpg