黑马程序员技术交流社区

标题: VUE中关于$emit的用法 [打印本页]

作者: 春暖花开啊    时间: 2019-11-17 20:24
标题: VUE中关于$emit的用法
本帖最后由 春暖花开啊 于 2019-11-17 20:34 编辑

1.父组件可以使用 props 把数据传给子组件。
2.子组件可以使用 $emit 触发父组件的自定义事件


子组件:
[AppleScript] 纯文本查看 复制代码
<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>






父组件:
[AppleScript] 纯文本查看 复制代码
<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>



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






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2