Question

我有三个文件：

SingleFileComponent.js
app_index.js
index.html

我在“ SingleFileComponent.js”文件中声明模板，将其导入“ app_index.js”，在此处创建我的Vue实例，然后将两者都导入到我使用的“ index.html”中

<single-file-component></single-file-component>

创建一个按钮。

SingleFileComponent.js

export default {
    template:"<button type='button' value='test'>{{ text }}</button>",
    props: [
        'text',
    ]
}

app_index.js

import SingleFileComponent from './SingleFileComponent.js';

new Vue({
    el: '#app',
    components: {
        SingleFileComponent,
    },
    methods: {
        on_click: function() {
            alert('import')
        }
    }
});

index.html

<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="#">
    <script src="vue.min.js"></script>
    <title>Vue.js Single File Component</title>
</head>
<body>
    <div id="app">
        <single-file-component id="test" text="Test" @click="on_click()"></single-file-component>
    </div>
    <div>
        <button type="button" id="direct" @click="onclick()">Direct</button>
    </div>
    <script>
        var direct = new Vue({
            el: '#direct',
            methods: {
                onclick: function() {
                    alert('Direct instance')
                }
            }
        })
    </script>
    <script type="module" src="singlefilecomponent.js"></script>
    <script type="module" src="app_index.js"></script>
</body>
</html>

当单击事件发生时，我想从Vue实例中调用“ on_click”方法。但是它没有调用它，也没有给我一个错误。

当我替换时，它什么也没叫

methods: {
    on_click: function() {
        alert('import')
    }
}

与

filters: {
    on_click: function() {
        alert('import')
    }
}

如上所述，我在实例（'app_index.js'）中声明了该方法，该方法无效。

然后我在组件（'SingleFileComponent.js'）中声明了该组件，该组件也无法正常工作。

但是，当我在HTML文件本身中创建Vue实例并在其中声明一个方法并将其与click事件绑定时，它会完美运行。

当用<single-file-component>标签创建的按钮上发生单击事件时，我必须在哪里声明该组件的方法，以便可以调用它？

Answer 1

修改SingleFileComponent.js

export default {
  template:"<button type='button' v-on:click="onClick"  value='test'>{{ text }}</button>",
  props: [
    'text',
  ],
  methods: {
    onClick: function(e) {
      console.log('e: ', e);
      alert('onClick method is invoked!');
    }
  }
}

Vue.js调用组件/实例方法

1 个答案: