Vue: Using component methods inside named slots

Created on 8 Jul 2016  ·  2Comments  ·  Source: vuejs/vue

Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      alert('ok');
    }
  }
})

var parent = new Vue({
  el: '#events-example'
})

and HTML

<template id="child-template">
  <slot name="form">
  </slot>
</template>

<div id="events-example">
  <child>
    <div slot="form">
      <input :value="msg">
      <button v-on:click="notify">Dispatch Event</button>
    </div>
  </child>
</div>

This seems not working. I keep getting the error:

[Vue warn]: v-on:click="notify" expects a function value, got undefined

Most helpful comment

Suggest: Maybe should exist some alternative?

<template slot="item1" scope="props"> could past the properts, imagine something like <template slot="item1" scope="props" method="click">

All 2 comments

Suggest: Maybe should exist some alternative?

<template slot="item1" scope="props"> could past the properts, imagine something like <template slot="item1" scope="props" method="click">

Was this page helpful?
0 / 5 - 0 ratings