Merhabalar ,
html :
<div id="example">
<example-component>
.....
</example-component>
<div id='box'>
//buraya component içerisindeki fonksiyon müdahale edemesin istiyorum.
</div>
</div>
instance (js) :
var example = new Vue({
components:{
'example-component': exampleComponent
},
})
component (js) :
var exampleComponent= {
template: {
<div>
<button @click='showMessage()' class='btn'>tikla</button>
</div>
},
methods:{
showMessage(){
document.getElementById('box').style.backgroundColor = 'red';
}
}
}
örnek olarak paylaştığım bu kodları çalıştırdığımda componentin içerisinde tanımlı olan fonksiyonum da çalışan kod sayfa içerisindeki tüm elementlere müdahale edebiliyor. Ben sadece component içerisindeki elementlere müdahale etsin istiyorum. Bunu nasıl yapabilirim ?