插槽内的 Vue.js 方法不起作用答案

【问题标题】：Vue.js Methods inside the slot is not working插槽内的 Vue.js 方法不起作用
【发布时间】：2016-07-08 17:33:09
【问题描述】：

似乎方法和数据在插槽内不起作用。如果我们需要在组件的槽内使用组件方法怎么办？

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

在js中

// register child, which dispatches an event with
// the current message
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      alert('ok');
    }
  }
})

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

https://jsfiddle.net/ffsojvw4/

【问题讨论】：

标签： vue.js

【解决方案1】：

您要在slots 上使用的methods 和data 应该绑定到父级的作用域。

【讨论】：