[分享]公用方法vuethis

在Vue中，this关键字常常用来指向组件实例。当我们在组件中编写Vue代码时，我们通常使用this来访问组件的公用方法、属性和状态。Vue的公用方法是指可以在多个组件中共用的方法。这些方法被定义在V...

在Vue中，this关键字常常用来指向组件实例。当我们在组件中编写Vue代码时，我们通常使用this来访问组件的公用方法、属性和状态。

Vue的公用方法是指可以在多个组件中共用的方法。这些方法被定义在Vue的实例中，通过this关键字来访问。在组件中，我们可以通过Vue.extend方法来扩展Vue实例，从而获得这些公用方法。

Vue.extend({
  methods: {
    sayHello: function () {
      console.log('Hello from mixin!')
    }
  }
}) 

当我们将组件渲染到文档中时，Vue会自动在组件中注入这些公用方法，我们可以在组件中使用this来访问它们：

Vue.component('my-component', {
  template: '<div><button v-on:click="sayHello">Click me</button></div>',
  methods: {
    sayHello: function () {
      this.$emit('hello');
    }
  }
}) 

上面的例子中，我们使用this.$emit方法来触发my-component实例上的hello事件。

此外，Vue的实例也有一些默认的公用方法，例如$watch和$set。$watch用来监听组件的数据变化，$set用来添加新的属性到组件的数据对象中。

Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  created: function () {
    this.$watch('message', function (newValue, oldValue) {
      console.log('Message changed from ' + oldValue + ' to ' + newValue)
    })
  },
  methods: {
    changeMessage: function () {
      this.$set(this, 'message', 'Hello World!')
    }
  }
}) 

在上面的例子中，我们使用this.$watch方法来监听message属性的变化，并在变化时输出相应的日志。我们还使用this.$set方法来添加一个新的属性到组件的数据对象中。

总之，Vue的this关键字是非常重要的，它用来访问组件实例中的公用方法、属性和状态。我们可以使用它来监听数据变化、触发事件、操作数据等等。