美文网首页
$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 简述

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