Question

在此页面上

我可以设置类似的方法

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // define methods under the `methods` object
  methods: {
    greet: function (event) {
      // `this` inside methods points to the Vue instance
      alert('Hello ' + this.name + '!')
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// you can invoke methods in JavaScript too
example2.greet() // => 'Hello Vue.js!'

但是如果我做一个组件，那么这些方法就行不通了

    Vue.component('ti-user-card', {
        data: function () {
            return {
                pEmail: "test@domain.com"
            };
        },
        template: '#vUserCard',
        methods : {
            mEmail : function(event) {
                window.location.href = "mailto:" + this.pEmail;
            }
        }
    });

html

<template id="vUserCard">
     <button v-bind:click="mEmail"> 
          Email 
     </button>
</template>

<div id="app">
    <ti-user-card></ti-user-card>
</div>

我该如何解决？

谢谢

Answer 1

使用<button v-on:click="mEmail">A</button>代替<button v-bind:click="mEmail">A</button>，因为在这里处理事件，因此必须放置v-on:click而不是v-bind:click或:click

v-bind:someAtt="property"：属性可以是props值，数据对象或计算出的属性

v-on:event="eventHandler"：eventHandler是一个方法

如何在vue.js组件中设置方法？

1 个答案: