Vue项目必备技巧：$emit打造定制弹窗，解决交互问题

方式一：使用Vue自带的$emit

想要做个vue项目，可是里面好像没有我们想要的弹窗组件，比如说那个prompt类型的。不过别担心，我们完全可以自己动手搞起来！首先，你要理解清楚$emit在vue里到底是干嘛用的！

偷偷告诉你，在Vue里面，每一个组件都有一个超厉害的$emit功能，可以跟其他组件愉快互动。要是想让窗口显示或隐藏，就得用上这招儿。你只需要给弹出窗口的事件添点儿料，父组件只管瞅着这个定制的事件就好。再加个简单的v-model，弹窗就这么轻松搞定，既能控制也能读出数据来！

跟你说这个小技巧特别有用，能解决交互问题。比如你要传自定义事件的参数到父组件，就这么弄；想弹出提示框，直接用$emit就行！

方式二：使用Vuex状态管理

Vue.component('prompt', {
  template: `
    

      

        

          
{{title}}
          
          取消
          确定
        
      
    
  `,
  props: {
    title: {
      type: String,
      default: '请输入'
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    close(val) {
      if (val === 'ok') {
        this.$emit('ok', this.inputValue)
      } else {
        this.$emit('cancel')
      }
    }
  }
})

烦恼弹窗问题？别急，Vuex这个官方推荐的神器能搞定！帮你轻松解决组件间状态共享的难题~

首先，我们得在Vuex里搞个状态来管弹窗的事。然后，这个状态就是个开关，想让弹窗出来就给对应组件发个信号$emit就搞定了。最后，在弹窗组件里，用上mapState和mapMutations这两个好帮手，就能轻轻松松读取和修改Vuex里的状态，想怎么控制弹窗都行！

  

    弹出提示框
    
  

 

import Prompt from './prompt.vue'
export default {
  components: {
    Prompt
  },
  data() {
    return {
      showPrompt: false,
      inputValue: ''
    }
  },
  methods: {
    handleOk(val) {
      this.showPrompt = false
      this.inputValue = val
    }
  }
}

别怕，Vuex这个玩意儿能帮你把复杂的逻辑简化，让你的APP更好用。特别是当你需要共享或者控制多个模块时，用它就很方便！

方式三：使用第三方库

state: {
  isPromptShow: false,
  promptData: {
    title: '',
    inputPlaceholder: '',
    inputValue: ''
  }
}

别忘了看下这个超赞的UI库，像什么ElementUI、Vuetify、iView，都挺火的。这里面有各种好看又实用的UI组件，还包括了你可能会用到的对话框功能~

看过ElementUI这货没？现在流行得不行！里面那个MessageBox好用得很，各种提醒消息都能搞定，警告啊确认啥的都不在话下。那些第三方库全是经过大家试验过才拿出来用的，放心好了！

methods: {
  showPrompt() {
    this.$store.commit('setPromptData', {
      isPromptShow: true,
      promptData: {
        title: '请输入',
        inputPlaceholder: '请输入内容',
        inputValue: ''
      }
    })
  }
}

感到操作不爽吗？想要看起来顺眼又好用的界面？试试这些第三方库！用这几招，让你工作更高效，体验飞上天！

总结与展望

  

    

      
{{promptData.title}}
      
      取消
      确定
    
  

 

import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['isPromptShow', 'promptData'])
  },
  methods: {
    ...mapMutations({
      setPromptData: 'SET_PROMPT_DATA'
    }),
    closePrompt(val) {
      if (val === 'ok') {
        this.$emit('ok', this.promptData.inputValue)
      } else {
        this.$emit('cancel')
      }
      this.setPromptData({ isPromptShow: false })
    }
  }
}

搞定一个类似提示框的小东西，Vue有3招：$emitVuex或者找个第三方库也行。但各自有优缺点，到底怎么选？还是得根据你们的实际需要才好，相信聪明如你，一定能找到最合适的那个！

小弹窗让人头疼？别慌，用$emit一下子就搞定了。遇到大项目里到处要使用同样状态或者处理复杂数据咋办？别怕，Vuex来救场！想好看好用还省心？试试第三方库，保证让你眼前一亮！

mutations: {
  SET_PROMPT_DATA(state, data) {
    state.isPromptShow = data.isPromptShow
    state.promptData = data.promptData
  }
}

JavaScript这个东西在不断进步总会冒出新鲜玩意儿来。工作之余别忘了学点新知识，这样才能轻松解决问题和应对变化！

大家好今天我来教大家一个简单又好用的Vue技巧——弹出提示框。这边有几个不同的方法让你选择，你是用哪招完成的？如果遇到问题，记得和大家分享，我们会尽力帮助你解决的！

  

    弹出提示框
    
  

 

import Prompt from './prompt.vue'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
    Prompt
  },
  computed: {
    ...mapState(['isPromptShow', 'promptData'])
  },
  methods: {
    ...mapActions(['setPromptData']),
    showPrompt() {
      this.setPromptData({
        isPromptShow: true,
        promptData: {
          title: '请输入',
          inputPlaceholder: '请输入内容',
          inputValue: ''
        }
      })
    },
    closePrompt() {
      this.setPromptData({ isPromptShow: false })
    },
    handleOk(val) {
      console.log(val)
      this.setPromptData({ isPromptShow: false })
    }
  }
}