vue中的$含义及其用法详解

在Vue的实例上，我们可以发现一些以$开头的属性或方法，这些属性或方法就是Vue内部提供的一些API。这些具有特殊含义的$开头的属性和方法，叫做Vue的内置属性或内置方法。接下来，将详细讲解$开头的属性或方法及其用法详解。

$data

$data指向组件实例的数据对象。通过访问$data属性，可以读取及修改组件的数据。例如：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">修改信息</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    changeMessage () {
      this.$data.message = 'Hello, new Vue!'
    }
  }
}
</script>

$props

$props指向组件实例的 props 对象。通过访问$props属性，可以读取组件传递的 props 数据。例如：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  created () {
    console.log(this.$props.message)
  }
}
</script>

$el

$el指向组件使用的根DOM元素。例如：

<template>
  <div>
    <p>Hello, Vue!</p>
  </div>
</template>
<script>
export default {
  created () {
    console.log(this.$el)
  }
}
</script>

$watch

$watch可以监听数据的变化并执行回调函数。例如：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="addCount">添加计数器</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  watch: {
    count (newValue, oldValue) {
      console.log(`新计数：${newValue}，旧计数：${oldValue}`)
    }
  },
  methods: {
    addCount () {
      this.$data.count++
    }
  }
}
</script>

$refs

$refs可以访问标识了ref属性的DOM元素或组件实例。例如：

<template>
  <div>
    <input ref="input" type="text" />
    <button @click="focusInput">聚焦输入框</button>
  </div>
</template>
<script>
export default {
  methods: {
    focusInput () {
      this.$refs.input.focus()
    }
  }
}
</script>

$emit

$emit可以触发当前实例上的事件，同时可以向父级组件传递参数。例如：

<!-- 父组件 -->
<template>
  <div>
    <child-component @change-message="changeParentMessage"></child-component>
  </div>
</template>
<script>
export default {
  data () {
    return {
      parentMessage: 'Hello, Parent!'
    }
  },
  methods: {
    changeParentMessage (message) {
      this.parentMessage = message
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <button @click="changeChildMessage">修改信息</button>
  </div>
</template>
<script>
export default {
  methods: {
    changeChildMessage () {
      this.$emit('change-message', 'Hello, Parent! I am the Child.')
    }
  }
}
</script>