I have a primary element within which there is a secondary element with vue.js 2.0.
The issue arises when the secondary element relies on methods from the primary element.
Here's an illustration:
Vue.component('primary-element', {
template: '<p>This is the main component. <sub-component><button @click="test()">If this button is pressed: "sub-component" should appear. </button></sub-component></p>',
methods: {
test() {
alert('main element');
}
}
})
Vue.component('sub-component', {
template: '<p>This is sub-component <slot></slot> </p>',
methods: {
test() {
alert('sub-component');
}
}
})
var app = new Vue({
el: '#app'
})<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="app">
<primary-element></primary-element>
</div>How can I ensure that the sub-component uses its own methods, and in this scenario display an alert saying 'sub-component' instead of 'main element' when the button is clicked?