美文网首页
$emit 简述

$emit 简述

作者: 是素净呀丶 | 来源:发表于2017-05-05 15:58 被阅读0次

可实现组件之间的通信,主要讲父子组件之间。
以自定义一个t-search组件为例。

<temple>
  <div>
    <p>{{ value }}</p>
    <t-search @search="search"
    /** 方式一实现value值动态更新 */
    @input="input"
    /** 方式二实现value值动态更新( 方式一的官方封装 ) */
    v-modle='value'
    ></t-search>
  </div>
</temple>

<script>
  import Vue from 'vue';

  const TSearch = Vue.extend({
    temple: '<div> <input type="text" :value="value" @input="sendValue" @keyup.enter="sendSearchValue"></input> </div>',
    props: ['value'],
    methods: {
      sendValue(e) {
        this.emit('input', e.target.value);
      },
      sendSearchValue(e) {
        this.emit('search', e.target.value);
      }
    }  
  });

  export default Vue.extend({
    data() {
      return {
        value: 'default'
      }
    },
    methods() {
      search(val) {
        alert(val);
      },
      input(val) {
        this.value = val;
      }
    },
    components: {
      TSearch
    }
  })
<script>

summary

publish / subscribe 模式; $emit 发布事件以及传递参数 父组件订阅事件后做出相关反应;

相关文章

  • $emit 简述

    可实现组件之间的通信,主要讲父子组件之间。以自定义一个t-search组件为例。 summary publish ...

  • Vue中this.$emit()【子组件向父组件传值】的使用

    简述 this.$emit()的作用:子组件向父组件传值注:必须在父组件中引用子组件,然后实现传值 使用 子组件中...

  • Vue 中的$emit $on 组件中的事件运用 非父子组件通信

    $emit 用v-on绑定 用本体用$emit绑定子组件:increment中的办法 html 子组件 $emit...

  • vue子传父

    $emit向上提交事件使用$emit调用父组件的事件

  • 抛出自定义事件

    vue3使用emit分发事件,类似于$emit,从setup的第二个参数中解构出emit

  • $emit $on

    emit用于触发事件on用于监听事件 可以用于父子、兄弟组件之间的通信

  • $emit

    vm.$emit( event, […args] ) 触发当前实例上的事件。附加参数都会传给监听器回调。 父组件使...

  • $emit()

    vue 为每个组件对象提供了一个内置方法 $emit ,它等同于自定义事件中的 new Event,trigger...

  • VUE $on/$emit实现

    这个文章介绍如何实现 vue的$on $emit $once $off 。 不懂$on $emit $once $...

  • angular中$broadcast、$emit和$on

    angular中$broadcast、$emit和$on $emit只能向parent controller传递e...

网友评论

      本文标题:$emit 简述

      本文链接:https://www.haomeiwen.com/subject/kwqstxtx.html