问在vue.js中不触发onclick事件
EN

Stack Overflow用户

提问于 2018-10-17 09:47:45

回答 3查看 3.3K关注 0票数 1

我有以下Vue.js模板：

<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);
        }
    });

当我点击我的自定义按钮时，什么都不会发生。我认为这是因为它在onSubmit组件中寻找ti-button，但是如何让它在ti-page-inquire组件中查看呢？

javascript

vue.js

vuejs2

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-10-17 10:24:37

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

小提琴例子

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>

票数 3

Stack Overflow用户

发布于 2018-10-17 10:13:44

这可能是因为您需要侦听本机单击事件。所以您需要使用.native修饰符。

<ti-button v-bind:button="page.button" v-on:click.native="onSubmit"></ti-button>

只有当按钮是ti-button组件的根元素时，这才能工作。否则，您必须将事件侦听器传递给ti-button组件中的按钮，如下所示。

<button v-on="$listeners" ...> ... </button>

票数 1

Stack Overflow用户

发布于 2018-10-17 10:09:52

尝试通过使用ti-button函数将事件从ti-button组件发出到父组件：

Vue.component('ti-button', {
  props: ['name'],
  template: '#vButton',

  data: {
    name: 'hi'
  },
  methods: {
    submit() {
      this.$emit('submit')
    }
  }
});

<template id="vButton">
    <button v-bind:title="name" @click="submit">{{name}}</button>
</template>

它在父组件(如v-on:submit="onSubmit" )中调用并使用onSubmit方法处理的发出的事件onSubmit：

<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:submit="onSubmit"></ti-button>
  </div>
</script>

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