javascript - 在vue.js中未触发onclick事件

我有以下模板：

<script type="text/x-template" id="ti-page-inquire">
    <div>
        <h3 class="mdc-typography--headline3">{{page.name}}</h3>
        <ti-button v-bind:button="page.button" v-on:click="onSubmit"></ti-button>
    </div>
</script>

<script type="text/x-template" id="ti-button">
    <button class="mdc-button mdc-button--raised" v-bind:title="button.name">{{button.name}}</button>
</script>

脚本

    Vue.component('ti-page-inquire', {
        props: ['page'],
        template: '#ti-page-inquire',
        methods : {
            onSubmit : function() {
                alert(1);
            }
        }
    });

    Vue.component('ti-button', {
        props: ['button'],
        template: '#ti-button',
        mounted: function () {
            // ripple on button
            mdc.ripple.MDCRipple.attachTo(this.$el);
        }
    });

当我点击我的自定义按钮时，什么都没有发生。我认为这是因为它在Vue.js组件中查找onSubmit，但是如何让它在ti-button组件中查找？

最佳答案

组件是黑匣子，您应该捕获其中的所有事件并将它们发送到外部世界。
Fiddle example

Vue.component('ti-button', {
    props: ['button'],
    template: '#ti-button',
    mounted: function () {
        // ripple on button
        mdc.ripple.MDCRipple.attachTo(this.$el);
    },
    methods: {
      buttonClicked: function() {
        this.$emit('button-clicked');
      }
    }
});


<script type="text/x-template" id="ti-page-inquire">
    <div>
        <h3 class="mdc-typography--headline3">{{page.name}}</h3>
        <ti-button v-bind:button="page.button" v-on:button-clicked="onSubmit"></ti-button>
    </div>
</script>

<script type="text/x-template" id="ti-button">
    <button class="mdc-button mdc-button--raised" v-bind:title="button.name" @clicked="buttonClicked">{{button.name}}</button>
</script>

关于javascript - 在vue.js中未触发onclick事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52860809/