2026-03-13

vue的$

在 Vue 中，以 $ 开头的属性和方法通常是 Vue 框架内部提供的特殊属性或方法，用于访问 Vue 实例的一些内部属性或执行特定的操作。以下是一些常见的 $ 参数及其用法：

属性

$data：Vue 实例的数据对象，包含实例中定义的数据。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  }
});
console.log(app.$data.message); // 输出：Hello, Vue!

$props：包含父组件传递给子组件的属性。

Vue.component('my-component', {
  props: ['message'],
  mounted() {
    console.log(this.$props.message); // 输出：Hello, Vue!
  }
});

$el：Vue 实例关联的根 DOM 元素。

const app = new Vue({
  el: '#app'
});
console.log(app.$el); // 输出：#app 元素的 DOM 引用

$options：用于当前 Vue 实例的初始化选项。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log(this.$options.data().message); // 输出：Hello, Vue!
  }
});

$refs：包含组件中所有拥有 ref 特性的 DOM 元素或子组件实例。

const app = new Vue({
  mounted() {
    console.log(this.$refs.myRef); // 输出：子组件的实例或 DOM 元素的引用
  }
});

$attrs：访问父组件传递给子组件但子组件没有显式声明接收的非 prop 特性（attribute）集合。

Vue.component('my-component', {
  mounted() {
    console.log(this.$attrs.title); // 输出：Custom Title
  }
});

方法

$emit(event, ...args)：在子组件中触发父组件的事件。

Vue.component('my-component', {
  methods: {
    handleClick() {
      this.$emit('custom-event', 'Hello from child component!');
    }
  }
});

$on(event, callback)：监听当前实例上的自定义事件。

const app = new Vue({
  created() {
    this.$on('custom-event', data => {
      console.log(data); // 输出：Hello from child component!
    });
  }
});

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

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
      this.$nextTick(() => {
        console.log(this.$el.textContent); // 输出：Updated message
      });
    }
  }
});

$watch(expOrFn, callback, options)：用于观察 Vue 实例上的数据变化。

const app = new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message(newMessage, oldMessage) {
      console.log(`Old message: ${oldMessage}, New message: ${newMessage}`);
    }
  }
});

$set(object, key, value)：在 Vue 实例或组件实例中设置响应式属性的方法。

const vm = new Vue({
  data: {
    obj: {}
  }
});
vm.$set(vm.obj, 'newKey', 'newValue');

$delete(object, key)：在 Vue 实例或组件实例中删除属性的方法。

const vm = new Vue({
  data: {
    obj: { key: 'value' }
  }
});
vm.$delete(vm.obj, 'key');

$forceUpdate()：强制当前 Vue 实例重新渲染。

const vm = new Vue({
  data: {
    message: 'Hello'
  },
  methods: {
    updateMessage() {
      this.message = 'Updated';
      this.$forceUpdate();
    }
  }
});

$destroy()：销毁当前 Vue 实例。
1
2
3
4
const vm = new Vue({
el: '#app'
});
vm.$destroy();
这些 $ 参数在 Vue 的开发中非常常用，可以帮助开发者更好地管理和操作 Vue 实例及其组件。