Question

我正在创建一个模态，它被定义为一个组件。该组件有一个方法＆＃34; set_pdf_form（＆＃39; x＆＃39;）＆＃34;将其中一个数据变量更改为x，在组件模板中有一个@click调用此方法。但该组件中的方法无法接听电话。相反，如果我将方法放在root中，它会响应该调用。

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）

var vm = new Vue({
    el: '#app',

    methods: {
        set_pdf_form (f) {
            console.log('why do i respond to the call of the component?');
        }
});

和模板

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

我认为，由于每个组件实例都有自己的隔离范围，因此@click应该调用模态实例的方法。我不明白为什么它是响应电话的根方法。

我在这里缺少什么？

Answer 1

您需要在根组件中注册并将其设为inline-template

请参阅代码.. http://www.webpackbin.com/4koPpp92Z

http://vuejs-ru.github.io/vuejs.org/guide/best-practices.html（搜索inline-template）

对此进行了解释

Answer 2

您的问题是插槽内容的编译范围。插槽内容中引用的任何内容都将位于内容所在的范围内，而不是子组件。

给出html如：

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

doSomething将需要存在于父Vue实例上，而不是my-component Vue实例中。

请参阅https://vuejs.org/v2/guide/components.html#Compilation-Scope

上的文档

我怀疑你工作的组件没有使用插槽？

一种可能的解决方案

可以使用scoped slots将this引用从子组件传递给组件使用者。这使消费者可以访问组件上定义的任何方法。

示例dog组件模板：

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

组件内部方法的调用得到了root的回答

2 个答案:

一种可能的解决方案