Vue.js use correct component

Question

I've got a main-component in that main-component I've a sub-component with vue.js 2.0.

The problem is that the sub-component uses the methods in the main-component.

I've made an example:

Vue.component('main-component', {
  template: '<p>This is the main component. <sub-component><button @click="test()">If this button is presses: "sub-component" must show up. </button></sub-component></p>',
  methods: {
  	test() {
    	   alert('main-component');
        }
  }
})

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">
  <main-component></main-component>
</div>

How do I make sure the sub-component uses it's own methods, and in this case give an alert of: 'sub-component' instead of 'main-component' when the button is being pressed?

You have a couple of answers below. Can we get some feedback on whether either of them worked for you? — Bert
– Bert, Commented Jul 5, 2017 at 18:57

tony19 · Accepted Answer · 2022-07-16 02:09:23Z

1

Use a scoped slot.

Vue.component('main-component', {
  template:  `
    <p>This is the main component. 
      <sub-component>
        <template scope="{test}">
          <button @click="test()">If this button is presses: "sub-component" must show up. </button>
        </template>
      </sub-component>
    </p>`,
  methods: {
    test() {
           alert('main-component');
        }
  }
})

Vue.component('sub-component', {
  template: '<p>This is sub-component <slot :test="test"></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">
  <main-component></main-component>
</div>

edited Jul 16, 2022 at 2:09

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jun 25, 2017 at 16:33

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bert Over a year ago

@Jamie No problem :)

Decade Moon · Accepted Answer · 2017-06-25 11:50:20Z

0

Perhaps you can try something like this:

<sub-component ref="sub"><button @click="$refs.sub.test()">...</button></sub-component>

answered Jun 25, 2017 at 11:50

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Collectives™ on Stack Overflow

Vue.js use correct component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related