this.$func
时间: 2025-02-11 08:18:15 浏览: 29
### Vue.js 中 `this.$func` 的用法
在 Vue.js 及其他 JavaScript 框架中,`this.$func` 形式的属性通常用于访问全局或插件提供的方法和对象。这类成员可以是事件总线、生命周期钩子、辅助工具函数等。
#### 1. `$bus`: 实现组件间通信
为了实现非父子关系的两个组件之间的通讯,可以通过创建一个空的 Vue 实例作为中央事件中心[^1]:
```javascript
// main.js 文件内配置全局事件总线
Vue.prototype.$bus = new Vue();
new Vue({
render: h => h(App),
router,
store
}).$mount('#app');
```
任何地方都可以通过 `this.$bus` 来发送(`$emit`) 或监听 (`$on`) 自定义事件。
#### 2. `$nextTick`: 延迟 DOM 更新后的操作
当改变响应式数据后立即尝试读取依赖该数据的 DOM 节点可能会失败,因为此时 DOM 还未完成更新。这时就可以利用 `$nextTick()` 方法,在下次 DOM 更新循环结束后再执行延迟回调[^3]:
```javascript
data() {
return {
message: "Hello World!"
}
},
methods: {
updateMessageAndLogDomContent() {
this.message = '你好,世界!';
// 此处会报错,因DOM还未更新
console.log(this.$refs.test1.innerText);
this.$nextTick(() => {
// 下次DOM更新完成后才打印
console.log('test1 nextTick:', this.$refs.test1.innerText);
});
}
}
```
#### 3. `$emit`: 子向父传递消息
对于嵌套结构内的子组件来说,想要通知其上级发生的变化,则可通过调用 `$emit(eventName[, ...args])` 向上层发出信号并携带额外的数据参数[^5]:
```html
<!-- ChildComponent.vue -->
<template>
<button @click="incrementCounter">{{ counter }}</button>
</template>
<script>
export default {
data() {
return { counter: 0 };
},
methods: {
incrementCounter() {
this.counter++;
this.$emit('increment'); // 发送增量信息给父级处理
}
}
};
</script>
```
以上展示了三种常见的 `this.$func` 类型的应用场景及其具体实现方式。每种用途都体现了 Vue 设计理念下的灵活性与可扩展性特点。
阅读全文
相关推荐
















