在vue中$的使用方法

在 Vue 中，$ 符号通常用来访问 Vue 实例中的属性或方法。以下是 $ 符号的使用方法：

1. 访问 Vue 实例的数据和方法

可以通过 this.$data 来访问 Vue 实例的数据，通过 this.$methods 来访问 Vue 实例的方法，例如：

new Vue({
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    greet: function () {
      alert(this.message)
    }
  }
})

// 访问数据
this.$data.message // 'Hello Vue.js!'

// 调用方法
this.$methods.greet() // 弹出 'Hello Vue.js!'

2. 访问 Vue.js 内置的属性和方法

可以通过 this.$el 来访问 Vue 实例的根元素，通过 this.$nextTick() 来执行 DOM 更新后的回调函数，例如：

new Vue({
  el: '#app',
  mounted: function () {
    console.log(this.$el) // 输出根元素
    this.$nextTick(function () {
      // DOM 更新后的回调函数
    })
  }
})

3. 访问组件的属性和方法

在组件中，可以通过 this.$parent 来访问父组件实例，通过 this.$refs 来访问子组件或元素，例如：

Vue.component('child-component', {
  template: '<div>Child Component</div>',
  mounted: function () {
    console.log(this.$parent) // 输出父组件实例
  }
})

new Vue({
  el: '#app',
  mounted: function () {
    console.log(this.$refs.child) // 输出子组件或元素
  }
})