Javascript 组件内部方法的调用由根响应

我正在创建一个模态，它被定义为一个组件。 组件有一个方法“set_pdf_form（'x'）”将其一个数据变量更改为x，并且在组件模板中有一个@click调用此方法。 但是组件中的方法不响应调用。相反，如果我将方法放在根中，它会响应调用

modal.js

Vue.component('modal', {
    template: '#modal-template',
    props: ['show'],

    methods: {
        set_pdf_form (f) {
            this.selected_pdf_form = f;
            console.log('i never get called');
        },
        close () {
            this.show = false;
        }
    },

    data () {
        return {
            selected_pdf_form: 't'
        }
    }
});

root.js（VUE 1.0.26）

模板呢

<modal v-ref:pdf>
    <h3 slot="header">PDF</h3>
    <div slot="body">
        <form slot="form" id="modalform" action="pdf/controller>/123" target="_blank" method="post" accept-charset="utf-8">
            <p slot="body" class="outputformat">
                <a @click.prevent="set_pdf_form('one')"><img src="lay/output_one.svg"></a>
                <a @click.prevent="set_pdf_form('two')"><img src="lay/output_two.svg"></a>
                <a @click.prevent="set_pdf_form('three')"><img src="lay/output_three.svg"></a>
            </p>
            <div class="modal-buttons">
                <button class="cancel" @click.prevent="closeModal('pdf')">cancel</button>
                <button class="go" @click="closeModal('pdf')">go</button>
            </div>
        </form>
    </div>
</modal>

PDF


取消
去

我认为，由于每个组件实例都有自己的独立作用域，@click应该调用模态实例的方法。我不明白为什么是根方法响应调用

---

我这里缺少什么？

您需要在根组件中注册，并使其成为

内联模板

请参阅代码

---

这在（搜索

内联模板）
中进行了解释。您的问题是插槽内容的编译范围。插槽内容中引用的任何内容都将位于内容所在的范围，而不是子组件

给定html，例如：

<my-component>
  <a @click="doSomething()">Do something</a>
</my-component>

使用标记的示例：

<dog>
  <template scope="props">
    <a href="#" @click="props.thisDog.bark()">Click me</a>
  </template>
</dog>


谢谢，你的代码显然起到了作用，但是-你链接到的俄罗斯文档网站与vuejs.org上的文档不同，我不太确定该怎么想。无论如何，我觉得奇怪的是，我必须内联模板一个组件，才能让它使用自己的范围-当我插入“内联模板”和“组件”时-它部分破坏了我的代码——最重要的是：我的应用程序中有十几个其他组件，它们的行为完全符合人们的想法，即在它们自己的范围内；我不明白为什么这个模态成分不同见英文文档。“使组件的模板编译不可缓存。”可能您的问题是该组件已缓存
<template>
      <slot :thisDog="this"></slot>
</template>

<script>
  export default {
    methods: {
      bark() {
        console.log("bark!");
      }
    }
  }
</script>

<dog>
  <template scope="props">
    <a href="#" @click="props.thisDog.bark()">Click me</a>
  </template>
</dog>