>웹 프론트엔드 >View.js >vue에서 $ 기호의 역할

vue에서 $ 기호의 역할

下次还敢
下次还敢원래의
2024-04-30 04:33:141170검색

$ 기호는 Vue의 현재 인스턴스를 나타내며 인스턴스 속성, 이벤트 버스, 수명 주기 후크 및 데이터 객체 액세스, 이벤트 트리거 및 수신, 인스턴스 참조 가져오기, 루트 인스턴스 검사를 포함한 특수 기능에 대한 액세스를 제공합니다.

vue에서 $ 기호의 역할

Vue에서 $ 기호의 역할

Vue.js에서 $ 기호는 현재 작동 중인 인스턴스를 나타내는 특수 변수입니다. 다음에 대한 액세스를 제공합니다:

1. 인스턴스 속성 및 메서드

  • $data: 인스턴스의 데이터 객체 $data:实例的数据对象
  • $props:实例的属性对象
  • $methods:实例的方法对象
  • $computed:计算属性对象
  • $watch:监听属性对象

2. 事件总线

  • $emit:触发事件
  • $on:监听事件
  • $once:监听事件(仅触发一次)
  • $off:移除事件监听器

3. 生命周期钩子

  • $beforeCreate
  • $created
  • $beforeMount
  • $mounted
  • $beforeUpdate
  • $updated
  • $beforeDestroy
  • $destroyed

4. 其他功能

  • $root:获取根 Vue 实例
  • $refs:访问组件的引用
  • $parent:获取父组件实例
  • $children
  • $props: 인스턴스 속성 객체

$methods: 인스턴스의 메소드 객체 $computed: 계산된 속성 객체

$watch: 모니터링 속성 객체

🎜🎜🎜 2. 이벤트 버스🎜🎜🎜🎜$emit: 이벤트 트리거 🎜🎜$on: 이벤트 모니터링 🎜🎜$once: 이벤트 모니터링(만 한 번 트리거됨) 🎜🎜$off: 이벤트 리스너 제거 🎜🎜🎜🎜3. 수명 주기 후크 🎜🎜🎜🎜$beforeCreate🎜🎜 $created🎜🎜$beforeMount🎜🎜$mounted🎜🎜$beforeUpdate🎜🎜$updated 🎜🎜 $beforeDestroy🎜🎜$destroyed🎜🎜🎜🎜4. 기타 기능🎜🎜🎜🎜$root: 루트 Vue 인스턴스 가져오기🎜🎜 $ refs: 구성 요소의 참조에 액세스🎜🎜$parent: 상위 구성 요소 인스턴스 가져오기🎜🎜$children: 하위 구성 요소 인스턴스 가져오기🎜🎜🎜🎜 사용 예: 🎜🎜
<code class="js">methods: {
  increment() {
    this.$data.count++ // 访问数据对象
  }
},
mounted() {
  this.$on('my-event', this.handleEvent) // 监听事件
},
created() {
  console.log(this.$root) // 获取根实例
}</code>
🎜$ 기호를 활용하면 개발자는 Vue 구성 요소의 인스턴스 상태, 이벤트 및 동작에 쉽게 액세스하고 조작할 수 있습니다. 🎜

위 내용은 vue에서 $ 기호의 역할의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.