vue中this.$用法

在 Vue.js 中，`this.$` 是一个特殊的指向当前实例的方法或属性访问器，它是 `$options` 对象的简写形式。`$options` 包含了很多预设的选项，比如 `data`, `methods`, `computed`, `watch`, `components`, 等等。通过 `this.$`，你可以直接访问这些内置的对象和服务。

例如，如果你有一个名为 `myMethod` 的方法在 `methods` 对象中，你可以这样调用：

this.$myMethod(param1, param2);

另外，`this.$` 还可以用来调用一些全局的 API，比如：
- `this.$emit(event, data)` 发送自定义事件
- `this.$refs[refName]` 访问指定的 ref 元素
- `this.$parent` 访问当前实例的父组件
- `this.$el` 获取当前组件的实际 DOM 元素

但是需要注意的是，从 Vue 3.0 开始，为了更好地管理生命周期和插件依赖，`this.$` 已经不再推荐使用，而是建议使用更明确的路径来访问组件内的特性：

// Vue 3
this.methods.myMethod(param1, param2); // 或 this.$attrs.myMethod
this.components.someComponentInstance;

相关问题

vue中 this.$eventHub.$emit 的用法

在 Vue 中，`this.$eventHub.$emit` 是一种通过事件总线进行跨组件通信的方式。通常情况下，我们可以通过创建一个事件总线实例，并将其挂载到 Vue 实例的原型上，以便在整个应用程序中访问。下面是一种常见的用法示例：

1. 创建事件总线实例并挂载到 Vue 实例的原型上：

// main.js
import Vue from 'vue';

Vue.prototype.$eventHub = new Vue();

2. 在发送方组件中使用 `$emit` 方法触发事件：

// SenderComponent.vue
export default {
  methods: {
    sendData() {
      this.$eventHub.$emit('custom-event', data);
    }
  }
}

3. 在接收方组件中使用 `$on` 方法监听事件：

// ReceiverComponent.vue
export default {
  created() {
    this.$eventHub.$on('custom-event', this.handleEvent);
  },
  destroyed() {
    this.$eventHub.$off('custom-event', this.handleEvent);
  },
  methods: {
    handleEvent(data) {
      // 处理接收到的事件数据
    }
  }
}

通过使用 `$emit` 方法触发事件，在其他组件中使用 `$on` 方法进行事件监听，就可以实现跨组件通信。需要注意的是，在不需要监听事件时，记得使用 `$off` 方法取消事件监听，以避免内存泄漏。

vue 中 this.$set的用法

this.$set 是 Vue.js 提供的一个方法，用于在 Vue 实例中动态添加响应式属性。它的用法如下：

this.$set(object, key, value)

其中，object 是要添加属性的对象，key 是属性名，value 是属性值。这个方法会将属性添加到对象中，并且使其成为响应式的，这样当属性值发生变化时，Vue 会自动更新视图。

例如，如果我们有一个 data 对象：

data: {
message: 'Hello, Vue!'
}

如果我们想要动态添加一个属性，比如 count，我们可以这样做：

this.$set(this.data, 'count', 1)

这样，我们就可以在模板中使用 {{ count }} 来显示 count 属性的值了。