$emit 简述

2017-05-05  本文已影响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 发布事件以及传递参数 父组件订阅事件后做出相关反应;

上一篇 下一篇

猜你喜欢

热点阅读