VueCONF US 2019'da Chris Fritz (Vue.js Core Team Emeriti ) tarafından belirtildiği gibi
Kia girmiş olsaydık .nativeve daha sonra baz girişin kök elemanı bir girişten bir etikete değişti ve bu bileşen kırıldı ve açık değil ve aslında, gerçekten iyi bir testiniz olmadıkça hemen yakalayamayabilirsiniz. Bunun yerine, şu anda Vue 3'te bir anti-desen kaldırılacağını düşündüğüm.native değiştiricinin kullanımından kaçınarak, ebeveynin hangi öğe dinleyicilerinin eklendiğini önemsediğini açıkça tanımlayabileceksiniz ...
Vue 2 ile
Kullanma $listeners:
Yani, Vue 2 kullanıyorsanız, bu sorunu çözmek için daha iyi bir seçenek tamamen şeffaf bir sarma mantığı kullanmak olacaktır . Bu Vue $listeners, bileşen üzerinde kullanılan dinleyicilerin bir nesnesini içeren bir özellik sağlar . Örneğin:
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}
ve sonra biz sadece eklemem gerekiyor v-on="$listeners"için testbenzeri bileşeni:
Test.vue (alt bileşen)
<template>
<div v-on="$listeners">
click here
</div>
</template>
Şimdi <test>bileşen tamamen şeffaf bir sargıdır , yani normal bir <div>eleman gibi kullanılabilir : tüm dinleyiciler .nativedeğiştirici olmadan çalışacaktır .
Demo:
Vue.component('test', {
template: `
<div class="child" v-on="$listeners">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @click="testFunction"></test>
</div>
$emitYöntemi kullanarak :
$emitAna bileşendeki alt bileşenler olaylarını dinlememize yardımcı olan bu amaç için de yöntemi kullanabiliriz . Bunun için önce aşağıdaki gibi alt öğeden özel bir etkinlik yayınlamamız gerekir :
Test.vue (alt bileşen)
<test @click="$emit('my-event')"></test>
Önemli: Olay adları için her zaman kebap durumu kullanın. Daha fazla bilgi ve bu noktadan demo demosu için lütfen şu cevaba göz atın : VueJS hesaplanan değeri bileşenden üst öğeye geçirir .
Şimdi, bu yayılan özel etkinliği aşağıdaki gibi ana bileşenlerde dinlememiz gerekiyor:
App.vue
<test @my-event="testFunction"></test>
Yani, temelde v-on:clickya da steno yerine @clicksadece v-on:my-eventya da sadece kullanacağız @my-event.
Demo:
Vue.component('test', {
template: `
<div class="child" @click="$emit('my-event')">
Click here
</div>`
})
new Vue({
el: "#myApp",
data: {},
methods: {
testFunction: function(event) {
console.log('test clicked')
}
}
})
div.child{border:5px dotted orange; padding:20px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
<test @my-event="testFunction"></test>
</div>
Vue 3 ile
Kullanma v-bind="$attrs":
Vue 3 hayatımızı birçok yönden kolaylaştıracak. Bunun örneklerinden biri, sadece kullanarak daha az yapılandırmayla daha basit bir şeffaf sargı oluşturmamıza yardımcı olacağıdır v-bind="$attrs". Bunu alt bileşenlerde kullanarak, yalnızca dinleyicimiz doğrudan ebeveynten değil, aynı zamanda diğer normal özellikler de normal bir şekilde çalışır <div>.
Bu nedenle, bu soru ile ilgili olarak, Vue 3'teki hiçbir şeyi güncellememiz gerekmeyecek ve kodunuz <div>burada kök öğe gibi iyi çalışacak ve otomatik olarak tüm alt olayları dinleyecektir.
Demo # 1:
const { createApp } = Vue;
const Test = {
template: `
<div class="child">
Click here
</div>`
};
const App = {
components: { Test },
setup() {
const testFunction = event => {
console.log("test clicked");
};
return { testFunction };
}
};
createApp(App).mount("#myApp");
div.child{border:5px dotted orange; padding:20px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<test v-on:click="testFunction"></test>
</div>
Ancak <input />, ana etiket yerine ana öğeye öznitelikler ve olaylar uygulamamız gereken yuvalanmış öğelere sahip karmaşık bileşenler içinv-bind="$attrs"
Demo # 2:
const { createApp } = Vue;
const BaseInput = {
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input v-bind="$attrs">
</label>`
};
const App = {
components: { BaseInput },
setup() {
const search = event => {
console.clear();
console.log("Searching...", event.target.value);
};
return { search };
}
};
createApp(App).mount("#myApp");
input{padding:8px;}
<script src="//unpkg.com/vue@next"></script>
<div id="myApp">
<base-input
label="Search: "
placeholder="Search"
@keyup="search">
</base-input><br/>
</div>
@click.native="testFunction"