vue中的$listeners屬性做用

時間 2019-12-07

標籤 vue listeners 屬性简体版

原文原文鏈接

1、當組件的根元素不具有一些DOM事件，可是根元素內部元素具有相對應的DOM事件，那麼能夠使用$listeners獲取父組件傳遞進來的全部事件函數，再經過v-on="xxxx"綁定到相對應的內部元素上便可。html

　　注意：使用.native修飾符的事件，不會體如今$listeners屬性上。vue

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>vue測試</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
  <style>

  </style>
 </head>
 <body>
     <div id="app">
        <base-input
            v-model="username" 
            label="基礎輸入組件"
            @click.native="handleBaseInputClick"
            v-on:focus="handleBaseInputFocus"
            placeholder="請輸入您的名字"
            class="username-input"/>
    </div>
    <script>
        // 註冊組件
        // 由於base-input的外層是一個label元素，因此默認狀況下使用v-on:focus是無效的，因此須要配合$listeners使用，該屬性能夠把事件的監聽指向組件中某個特定的元素
        // 注意：若是父級的事件添加了.native修飾符，在$listeners中不會體現出來的
        Vue.component('base-input',{
            inheritAttrs: false,
            props: ['label','value'],
            template: `
                <label id="base-label">
                    {{label}}
                    <input v-bind:value="value" v-bind="$attrs" v-on="inputListeners"/>
                </label>
            `,
            data: function() {
                return {
                    
                }
            },
 computed: { inputListeners () { var vm = this
                    return Object.assign({},
                        this.$listeners,
                        {
                            input: function () {
                                vm.$emit('input', event.target.value)
                            },
                            focus: function (event) {
                                vm.$emit('focus', '哈哈哈，onfocus了') } } ) } },
            mounted: function(){
                console.log(`$attrs:`)
                console.log(this.$attrs)
                console.log(`$listeners:`)
                console.log(this.$listeners) // 父級添加的全部屬性都在這裏
            },
            methods: {
                
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            created: function(){
            
            },
            beforeUpdate: function(){
            
            },
            computed: {
                
            },
            beforeUpdate: function () {
                console.log(this.username)
            },
            methods: {
                handleBaseInputFocus: function(ev){
                    console.log(ev)
                },
                handleBaseInputClick: function(ev){
                    console.log(ev.type)
                }
            }
        })
    </script>
 </body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。