Vue的属性和方法

在 Vue.js 中，$ 是一个特殊前缀，用于表示 Vue 实例或 Vue 组件上的内置属性和方法。这些属性和方法被称为“实例属性”或“实例方法”。

以下是一些常见的实例属性和方法：

• $data：Vue 实例的数据对象。
• $props：Vue 组件的 props 对象。
• $el：Vue 实例或组件的根 DOM 元素。
• $refs：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。
• $options：Vue 实例或组件的选项对象。
• $parent：Vue 实例或组件的父实例或组件。
• $children：Vue 实例或组件的子实例或组件数组。
• $emit：触发当前实例或组件上的自定义事件。
• $on：监听当前实例或组件上的自定义事件。
• $once：监听当前实例或组件上的自定义事件，但只触发一次。
• $off：取消监听当前实例或组件上的自定义事件。
• $nextTick：在下一次 DOM 更新循环结束之后执行延迟回调。

需要注意的是，这些实例属性和方法只能在 Vue 实例或组件内部使用。在模板中，我们可以直接访问这些属性和方法，但在 JavaScript 代码中，我们需要通过 this 来访问它们。例如：

new Vue({
  data: {
    message: 'Hello World!'
  },
  mounted() {
    console.log(this.$data.message) // Hello World!
    console.log(this.$el) // <div id="app">...</div>
    console.log(this.$refs.myInput) // <input ref="myInput" type="text">
  }
})

<div id="app">
  <p>{{ message }}</p>
  <input ref="myInput" type="text">
</div>

好的，以下是一些常见的实例属性和方法的使用示例：

1. $data：Vue 实例的数据对象。

new Vue({
  data: {
    message: 'Hello World!'
  },
  created() {
    console.log(this.$data.message) // Hello World!
  }
})

1. $props：Vue 组件的 props 对象。

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

new Vue({
  el: '#app'
})

<div id="app">
  <my-component message="Hello World!"></my-component>
</div>

1. $el：Vue 实例或组件的根 DOM 元素。

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$el) // <div id="app">...</div>
  }
})

<div id="app">
  <p>Hello World!</p>
</div>

1. $refs：一个对象，包含所有具有 ref 属性的子组件和 DOM 元素。

new Vue({
  el: '#app',
  mounted() {
    console.log(this.$refs.myInput) // <input ref="myInput" type="text">
  }
})

<div id="app">
  <input ref="myInput" type="text">
</div>

1. $options：Vue 实例或组件的选项对象。

new Vue({
  data: {
    message: 'Hello World!'
  },
  created() {
    console.log(this.$options.data) // function () { return { message: 'Hello World!' } }
  }
})

1. $parent：Vue 实例或组件的父实例或组件。

Vue.component('child-component', {
  mounted() {
    console.log(this.$parent.$data.message) // Hello World!
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

<div id="app">
  <child-component></child-component>
</div>

1. $children：Vue 实例或组件的子实例或组件数组。

Vue.component('child-component', {
  mounted() {
    console.log(this.$children[0].$data.message) // Hello Child!
  }
})

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

<div id="app">
  <child-component>
    <child-component message="Hello Child!"></child-component>
  </child-component>
</div>

1. $emit：触发当前实例或组件上的自定义事件。

Vue.component('child-component', {
  methods: {
    sayHello() {
      this.$emit('hello', 'Child Component')
    }
  }
})

new Vue({
  el: '#app',
  methods: {
    handleHello(message) {
      console.log(`Hello from ${message}!`) // Hello from Child Component!
    }
  }
})

<div id="app">
  <child-component @hello="handleHello"></child-component>
</div>

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

new Vue({
  el: '#app',
  created() {
    this.$on('hello', (message) => {
      console.log(`Hello from ${message}!`) // Hello from Child Component!
    })
  }
})

new Vue({
  el: '#child',
  mounted() {
    this.$parent.$emit('hello', 'Child Component')
  }
})

<div id="app">
  <div id="child"></div>
</div>

1. $once：监听当前实例或组件上的自定义事件，但只触发一次。

new Vue({
  el: '#app',
  created() {
    this.$once('hello', (message) => {
      console.log(`Hello from ${message}!`) // Hello from Child Component!
    })
  }
})

new Vue({
  el: '#child',
  mounted() {
    this.$parent.$emit('hello', 'Child Component')
    this.$parent.$emit('hello', 'Another Child Component')
  }
})

<div id="app">
  <div id="child"></div>
</div>

1. $off：取消监听当前实例或组件上的自定义事件。

new Vue({
  el: '#app',
  created() {
    this.$on('hello', this.handleHello)
  },
  beforeDestroy() {
    this.$off('hello', this.handleHello)
  },
  methods: {
    handleHello(message) {
      console.log(`Hello from ${message}!`)
    }
  }
})

new Vue({
  el: '#child',
  mounted() {
    this.$parent.$emit('hello', 'Child Component')
  }
})

<div id="app">
  <div id="child"></div>
</div>

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

new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  },
  methods: {
    updateMessage() {
      this.message = 'Hello Vue.js!'
      this.$nextTick(() => {
        console.log(this.$el.textContent) // Hello Vue.js!
      })
    }
  }
})

<div id="app">
  <p>{{ message }}</p>
  <button @click="updateMessage">Update Message</button>
</div>

总之，这些实例属性和方法可以帮助我们更好地控制和管理 Vue 应用程序。在使用这些属性和方法时，需要注意它们的作用域和使用方式。