zoukankan      html  css  js  c++  java
  • VUE中关于$emit的用法

    一.事件

    关于什么是JavaScript事件可以参考:https://www.w3schools.com/js/js_events.asp

    二.$emit

    vue中对$emit的定义见:

    vm.$emit( eventName, […args] )

    • 参数:

      • {string} eventName
      • [...args]

      触发当前实例上的事件。附加参数都会传给监听器回调。

    三.用途与示例

    1.父组件可以使用 props 把数据传给子组件。

    1.子组件可以使用 $emit 触发父组件的自定义事件。

    子组件:

    <template>
      <div id="translate-form">
          <form>
              <input type="text" v-model="textToTranslate" placeholder="输入需要翻译的内容">
              <select>
                  <option value="en">English</option>
              </select>
              <input type="submit"  value="翻译"  v-on:click="formSubmit">
        </form>
      </div>
    </template>
    
    <script>
    export default {
      name: 'TranslateForm',
      data:function(){
          return{
              textToTranslate:'',
          }
      },
      methods: {
          formSubmit: function(e){
              this.$emit('formSubmit', this.textToTranslate); //父组件监听的名字必须是formSubmit
              e.preventDefault();
          }
      }
    }
    </script>
    
    <style>
    
    </style>

    父组件:

    <template>
      <div id="app">
          <h1>在线翻译</h1>
        <h5>简单 / 易用 / 便捷</h5>
       <TranslateForm v-on:formSubmit='translateText'></TranslateForm>
      </div>
    </template>
    
    <script>
    import TranslateForm from './components/TranslateForm'
    
    export default {
      name: 'App',
      components:{
          TranslateForm
      },
      methods:{
          translateText:function(text){
              alert(text)
          }
      }
    }
    </script>
    
    <style>
    #app {
        text-align: center;
    }
    </style>

    当点击子组件的翻译的时候,会将输入的内容弹框:

    四.参考资料

    [1]https://blog.csdn.net/sllailcp/article/details/78595077

    [2]VUE api:https://cn.vuejs.org/v2/api/#vm-emit

  • 相关阅读:
    kettle 连接 SQL Server 异常
    Quartz.NET
    过滤器和拦截器
    Spring Web MVC(一)
    Spring(三)之自动装配、表达式
    spring(四)之基于注解(Annotation-based)的配置.md
    Spring(一)之IOC、bean、注入
    Spring(二)之配置.md
    cookie和session详解
    jsp基础与提高(EL、JSTL)
  • 原文地址:https://www.cnblogs.com/sweeneys/p/10201458.html
Copyright © 2011-2022 走看看