【vue】$event的理解

一、在原生dom事件里就是事件对象

注意两点

1.不使用圆括号，event被自动当作实参传入

2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event

<button v-on:click="warn('Form cannot be submitted yet.', $event)">

  Submit

</button>



// ...

methods: {

  warn: function (message, event) {

    // 用来阻止默认事件

    if (event) event.preventDefault()

    alert(message)

  }

}

二、自定义事件组件，就是$ emit 的第一个参数

vue中事件绑定v-on，简写可以写作@

扫描二维码关注公众号，回复： 4081547 查看本文章

例子一：

（1）vue组件发出自定义事件，这个是带参的，不带参数的去掉后边的book

       <div class="book-items">

            <div class="book" v-for="book in books" @click="$emit('select',book)">

                <div class="cover"> <img :src="book.img_url"/> </div>

                <div class="title">{{book.title}}</div>

                <div class="authors">{{book.authors | join }}</div>

            </div>

        </div>

（2）组件自定义事件在“页面”的响应，对应一个页面中的方法，这里包含传参，如果不传，一个字符串就可以了

        <div class="section">

            <!-- 新书上架 -->

            <BookList :books="page_data.promotions"

                      heading="最新更新"

                      @select="preview($event) “>

            </BookList>

        </div>

对应的方法：

<script>

    export default{

        。。。

        methods: {

            preview (book) {

                this.selected = book

            }

        }

    }

</script>

例子二：在input组件中起到的作用也差不多，相当于传入的第一个参数

组件内：

<el-input

:placeholder="pl"

prefix-icon="el-icon-search"

@keyup.enter.native="$emit('search',$event.target.value)"

:value="terms"

</el-input>

</div>

</template>

export default{

props:["terms","pl"]

}

</script>

⚠️：因为使用了element所以这里要加一个native

外部绑定

</MySearch>

export default {

name: 'App',

data(){

return{

terms:"",

}

components:{

MySearch,

}

⚠️：v-on也可以在触发的时候运行一些代码，向上边的赋值，以及像这样的小逻辑<button v-on:click="counter += 1">Add 1</button>

【vue】$event的理解

猜你喜欢