第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

vue子組件實(shí)例上不能觸發(fā)click事件?

vue子組件實(shí)例上不能觸發(fā)click事件?

肥皂起泡泡 2019-03-21 23:15:49
在下面的代碼(只是一部分代碼)中,在sss按鍵能觸發(fā)click事件函數(shù)test,但是在nav-item組件上的click事件不能夠觸發(fā)???查閱了一些資料,也一直沒找到答案但是有一個(gè)解決辦法就是在子組件內(nèi)部拋出一個(gè)自定義事件,然后在組件實(shí)例上接收該事件,這樣可以觸發(fā)自定義的事件,但是下面這樣使用click事件不能觸發(fā)就搞不懂,所以想請教一下大家<div id="app" class="content">        <div class="nav bg_red">            <div class="nav_items">                <nav-item v-for="item in nav_item_title" v-bind:key="item" v-bind:itemname="item" v-bind:class="['item-label','bg_red',{bg_white:current_page==item}]" v-on:click="test"></nav-item>            </div>            <button class="item-label bg_red" v-on:click="test">ssss</button>        </div>        <component v-bind:is="current_component"></component>    </div>    <script>    Vue.component("nav-item",{            props:['itemname'],            template:"<button>{{itemname}}</button>",            methods:{                togg:function(){                    this.$emit("toggle",this.itemname)                },                battle:function(){                    alert(this.itemname);                }            }        });    var app=new Vue({            el:'#app',            data:{                nav_item_title:['page1','page2','page3','page4'],                current_page:'page1'            },            computed:{                current_component:function(){                    return "tab-"+this.current_page;                }            },            methods:{                activeitem:function(name){                    this.current_page=name;                },                test:function(){                    alert("this");                }            }        });
查看完整描述

4 回答

?
慕森卡

TA貢獻(xiàn)1806條經(jīng)驗(yàn) 獲得超8個(gè)贊

由于nav-item為自定義組件的實(shí)例,使用on直接綁定事件只能綁定自定義的事件,即在組件內(nèi)部使用emit('name')的方式拋出的事件,如果在子組件實(shí)例上綁定原生的事件,需要使用.native的事件修飾符。因?yàn)閎utton不是自定義組件,所以可以直接綁定原生事件,也不用一樓所說那樣傳入?yún)?shù)


查看完整回答
反對 回復(fù) 2019-04-08
?
鳳凰求蠱

TA貢獻(xiàn)1825條經(jīng)驗(yàn) 獲得超4個(gè)贊

子組件通過emit方式向父組件傳遞事件,父組件不是通過@click調(diào)用,你這里應(yīng)該是@toggle="test"


查看完整回答
反對 回復(fù) 2019-04-08
?
繁星點(diǎn)點(diǎn)滴滴

TA貢獻(xiàn)1803條經(jīng)驗(yàn) 獲得超3個(gè)贊

<button @click.native="test">按鈕</button>

試一下 事件修飾服


查看完整回答
反對 回復(fù) 2019-04-08
  • 4 回答
  • 0 關(guān)注
  • 4076 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號