Vue.js 中常见的以 $ 开头的实例属性和方法

1. $data

• 作用：包含 Vue 实例或组件的响应式数据对象。
• 用法：通过 this.$data 访问组件的 data 数据。
• 示例：

  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    },
    created() {
      console.log(this.$data.message); // 输出: Hello, Vue!
    }
  };
  

2. $el

• 作用：指向 Vue 实例或组件的根 DOM 元素。
• 用法：通过 this.$el 访问组件的根 DOM 元素。
• 示例：

  export default {
    mounted() {
      console.log(this.$el); // 输出: 
  ...
    }
  };
  

3. $props

• 作用：包含组件的 props 数据。
• 用法：通过 this.$props 访问组件的 props 数据。
• 示例：

  export default {
    props: ['message'],
    mounted() {
      console.log(this.$props.message); // 输出: 父组件传递的数据
    }
  };
  

4. $refs

• 作用：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。
• 用法：通过 this.$refs 访问被 ref 标记的子组件或 DOM 元素。
• 示例：

5. $options

• 作用：包含 Vue 实例或组件的选项对象。
• 用法：通过 this.$options 访问组件的选项对象。
• 示例：

  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    },
    created() {
      console.log(this.$options.data); // 输出: function () { return { message: 'Hello, Vue!' } }
    }
  };
  

6. $parent

• 作用：指向当前实例的父实例。
• 用法：通过 this.$parent 访问父组件的实例。
• 示例：

  export default {
    mounted() {
      console.log(this.$parent); // 输出: 父组件的实例
    }
  };
  

7. $root

• 作用：指向 Vue 应用的根实例。
• 用法：通过 this.$root 访问根实例。
• 示例：

  export default {
    mounted() {
      console.log(this.$root); // 输出: 根实例
    }
  };
  

8. $children

• 作用：包含当前实例的直接子实例的数组。
• 用法：通过 this.$children 访问子组件的实例数组。
• 示例：

  export default {
    mounted() {
      console.log(this.$children); // 输出: 子组件的实例数组
    }
  };
  

9. $emit

• 作用：触发当前实例上的自定义事件。
• 用法：通过 this.$emit(eventName, arguments) 触发自定义事件。
• 示例：

  export default {
    methods: {
      handleClick() {
        this.$emit('custom-click', '子组件的数据');
      }
    }
  };
  

10. $on

• 作用：监听当前实例上的自定义事件。
• 用法：通过 this.$on(eventName, callback) 监听自定义事件。
• 示例：

  export default {
    created() {
      this.$on('custom-event', (data) => {
        console.log(data); // 输出: 自定义事件的数据
      });
    }
  };
  

11. $once

• 作用：监听当前实例上的自定义事件，但只触发一次。
• 用法：通过 this.$once(eventName, callback) 监听自定义事件。
• 示例：

  export default {
    created() {
      this.$once('custom-event', (data) => {
        console.log(data); // 输出: 自定义事件的数据
      });
    }
  };
  

12. $off

• 作用：取消监听当前实例上的自定义事件。
• 用法：通过 this.$off(eventName, callback) 取消监听自定义事件。
• 示例：

  export default {
    created() {
      const handler = (data) => {
        console.log(data);
      };
      this.$on('custom-event', handler);
      this.$off('custom-event', handler);
    }
  };
  

13. $nextTick

• 作用：在下一次 DOM 更新循环结束后执行延迟回调。
• 用法：通过 this.$nextTick(callback) 在 DOM 更新后执行回调。
• 示例：

  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    },
    methods: {
      updateMessage() {
        this.message = 'Hello Vue.js!';
        this.$nextTick(() => {
          console.log(this.$el.textContent); // 输出: Hello Vue.js!
        });
      }
    }
  };
  

14. $slots

• 作用：包含组件的插槽内容。
• 用法：通过 this.$slots 访问组件的插槽内容。
• 示例：

  export default {
    mounted() {
      console.log(this.$slots.default); // 输出: 插槽内容
    }
  };
  

15. $attrs

• 作用：包含父组件传递给当前组件的属性（props 之外的属性）。
• 用法：通过 this.$attrs 访问组件的属性。
• 示例：

  export default {
    mounted() {
      console.log(this.$attrs); // 输出: { class: 'my-class', style: 'color: red' }
    }
  };
  

16. $listeners

• 作用：包含当前组件上监听的事件。
• 用法：通过 this.$listeners 访问组件的事件监听器。
• 示例：

  export default {
    mounted() {
      console.log(this.$listeners); // 输出: { 'custom-click': function() {} }
    }
  };
  

17. $watch

• 作用：用于监视数据的变化，并在数据变化时执行回调函数。
• 用法：通过 this.$watch(source, callback, options) 监视数据变化。
• 示例：

  export default {
    data() {
      return {
        message: 'Hello, Vue!'
      };
    },
    methods: {
      setupWatch() {
        this.$watch('message', (newVal, oldVal) => {
          console.log('message changed from', oldVal, 'to', newVal);
        });
      }
    },
    mounted() {
      this.setupWatch();
    }
  };