javascript - Vue.js 使用正确的组件

Question

我有一个主组件，在该主组件中我有一个带有vue.js的子组件。 Node.js 2.0。

问题在于子组件使用了主组件中的方法。

我举了一个例子:

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>

如何确保子组件使用它自己的方法，并在这种情况下发出警报:当按钮被使用时，“子组件”而不是“主组件”按下？

Answer 1

使用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>