vue中$的含义是什么

作者：远客网络发布时间：2024-12-12 14:36:51

vue中带$什么意思

在Vue中，带$符号的属性和方法主要有以下几种用法：1、代表Vue实例属性；2、代表Vue实例方法；3、代表全局API。这些$符号前缀的内容是Vue框架提供的一些内置功能，帮助开发者更便捷地操作和管理Vue实例及其组件。

一、代表Vue实例属性

Vue实例属性是指在Vue组件实例中可以直接使用的属性，通常以$符号开头，这些属性为开发者提供了许多便捷的功能。

$data：访问组件的数据对象。
```
console.log(this.$data);
```
$props：访问组件的props对象。
```
console.log(this.$props);
```
$el：访问组件的根DOM元素。
```
console.log(this.$el);
```
$options：访问当前Vue实例的初始化选项。
```
console.log(this.$options);
```
$parent：访问父组件实例。
```
console.log(this.$parent);
```
$root：访问根Vue实例。
```
console.log(this.$root);
```
$children：访问子组件实例数组。
```
console.log(this.$children);
```
$slots：访问插槽内容。
```
console.log(this.$slots);
```
$scopedSlots：访问作用域插槽内容。
```
console.log(this.$scopedSlots);
```
$refs：访问DOM元素和组件实例的引用。
```
console.log(this.$refs);
```

二、代表Vue实例方法

Vue实例方法是指可以在Vue组件实例中调用的方法，这些方法同样以$符号开头。

$watch：观察Vue实例的一个表达式或计算属性的变化。

this.$watch('someData', function(newVal, oldVal) {
  // 处理变化
});

$set：为对象添加响应式属性。

this.$set(this.someObject, 'newProperty', 'value');

$delete：删除对象的属性。

this.$delete(this.someObject, 'property');

$on：监听当前实例上的自定义事件。

this.$on('eventName', function() {
  // 处理事件
});

$once：监听一个自定义事件，但只触发一次。

this.$once('eventName', function() {
  // 处理事件
});

$off：移除自定义事件监听器。

this.$off('eventName', function() {
  // 处理事件
});

$emit：触发自定义事件。
```
this.$emit('eventName', eventData);
```
$forceUpdate：强制Vue实例重新渲染。
```
this.$forceUpdate();
```

$nextTick：在下次DOM更新循环结束后执行延迟回调。

this.$nextTick(function() {
  // DOM 更新完毕后的回调
});

三、代表全局API

这些API通常在Vue全局对象上使用，而不是在组件实例中使用。

Vue.use：安装Vue插件。
```
Vue.use(SomePlugin);
```

Vue.mixin：全局注册混入。

Vue.mixin({
  created: function() {
    // 全局混入逻辑
  }
});

Vue.component：注册或获取全局组件。

Vue.component('my-component', {
  // 组件选项
});

Vue.directive：注册或获取全局指令。

Vue.directive('my-directive', {
  // 指令选项
});

Vue.filter：注册或获取全局过滤器。

Vue.filter('my-filter', function(value) {
  // 过滤器逻辑
  return value;
});

四、实例说明

为了更好地理解这些$符号属性和方法的使用，我们来看一个具体的示例。

<template>
  <div>
    <p ref="paragraph">{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Hello, World!';
      this.$nextTick(() => {
        console.log(this.$refs.paragraph.textContent); // 输出: Hello, World!
      });
    }
  }
};
</script>