vue如何給自定義的組件綁定點擊事件
給自定義的組件綁定點擊事件
在做項目中我們往往會封裝許多的組件,來減少代碼的重復性,提高代碼的可利用性,有時候也會給組件綁定事件,但是經(jīng)常會失效。
先給cardinfo這個組件綁定一個點擊事件
? ? ?<cardinfo ? ? ? ? :content="content" ? ? ? ? :from="from" ? ? ? ? :ProPortrait="ProPortrait" ? ? ? />
一般都是這樣給點擊事件,可是有時候這個事件是沒用的,因為這個事件是引用組件頁面的事件,而不是組件本身的事件,所以組件內(nèi)不能識別這個事件的來源。
? ? ?<cardinfo ? ? ? ?@click="goodclick" ? ? ? ? :content="content" ? ? ? ? :from="from" ? ? ? ? :ProPortrait="ProPortrait" ? ? ? />
在@click后面加native表示的是當前頁面的事件
? <cardinfo ? ? ? ? @click.native="goodclick" ? ? ? ? :content="content" ? ? ? ? :from="from" ? ? ? ? :ProPortrait="ProPortrait" ? ? ? />
給自定義組件添加單擊事件
自己定義了一個按鈕按組件
<template> ? <div> ? ? ?<div class="endBtn"> ? ? ? ?<van-button type="danger" block color="linear-gradient( to left ,#F24B0B, #FF4A44 )">{{btnMsg}}</van-button> ? ? </div> ? </div> </template>
<script> export default { ? name: 'UiEndbutton', ? props:["btnMsg"], ? data() { ? ? return { ? ? ?? ? ? }; ? }, ? mounted() { ? ?? ? }, ? methods: { ? ?? ? }, }; </script>
<style lang="stylus" scoped> ? ?.endBtn ? ? ? width: 345px ? ? ? height: 44px ? ? ? border-radius: 4px ? ? ? background: radial-gradient(#F24B0B ?100%,#FF4A44 ? 100%); ? ? ? margin-top: 15px ? ? ? margin-left: 15px </style>
在其他的頁面引用這個組件
引入
import EndButton from '@/components/EndButton.vue'; export default { ? name: 'UiEndyuyuetransfer', ? ?components:{ ? ? ?PageTop, ? ? ? YuyueDetailItem, ? ? ? EndButton, ? ?}, ? ?methods:{ ? ?toEndYuyueTransferResult(){ ? ?this.$router.push({name:"EndYuyueTransferResult"}) ? ?} ? ?} }
在頁面中
<end-button btnMsg="終止" @click="toEndYuyueTransferResult"></end-button>
點擊按鈕你會發(fā)現(xiàn),方法沒有被觸發(fā)。
給vue組件綁定事件時候,必須加上native ,否則會認為監(jiān)聽的是來自Item組件自定義的事件。
<end-button btnMsg="終止" @click.native="toEndYuyueTransferResult"></end-button>
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法,文中給出了詳細的示例代碼供大家參考學習,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。2017-06-06詳解element-ui動態(tài)限定的日期范圍選擇器代碼片段
這篇文章主要介紹了element-ui動態(tài)限定的日期范圍選擇器代碼片段,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-07-07