###
Vue 中使用
@ 符号引入子组件
在
Vue 中，`
@` 符号通常用于简化路径引用以及作为事件绑定的缩写。对于路径引用，特别是在 Webpack 或类似的模块打包工具
配置下，可以设置
别名使得 `
@` 表示
项目的根目录下的 `
src`
文件夹。
#### 设置路径
别名
为了使 `
@` 能够指向
项目中的特定
文件夹（通常是
src），可以在 webpack
配置中添加如下设置：
```javascript
//
vue.config
.js or webpack
.config
.js depending on the project setup
module
.exports = {
configureWebpack: {
resolve: {
alias: {
'
@': path
.resolve(__dirname, '
src')
}
}
}
};
```
有了这个
配置之后，在导入任何位于 `
src` 下面的资源时就可以更简洁地书写路径了[^2]。
#### 使用
@ 进行事件监听
当提到使用 `
@` 来处理子组件通信时，实际上是指利用它来进行事件监听。这并不是说用 `
@` 去“引入”子组件，而是用来捕获来自子组件触发的自定义事件。下面是一个简单的例子展示如何实现父子组件间的交互[^3]。
假设有一个名为 `ChildComponent
.vue` 的子组件和一个父级组件 `ParentComponent
.vue`:
##### ChildComponent
.vue (子组件)
```html
<template>
<button
@click="sendEvent">Click me</button>
</template>
<script>
export default {
name: "ChildComponent",
methods: {
sendEvent() {
this
.$emit('custom-event', { message: 'Hello from child!' });
}
}
}
</script>
```
在这个例子中，点击按钮会调用 `sendEvent()` 函数并向外发射一个带有数据的对象给父组件。
##### ParentComponent
.vue (父组件)
```html
<template>
<div class="parent">
<!-- 使用
@ 绑定子组件发出的 custom-event -->
<child-component
@custom-event="handleCustomEvent"></child-component>
<p>Received Message: {{ receivedMessage }}</p>
</div>
</template>
<script>
import ChildComponent from '
@/components/ChildComponent'; // 利用了上面所说的路径
别名
export default {
components: {
ChildComponent,
},
data() {
return {
receivedMessage: ''
};
},
methods: {
handleCustomEvent(data) {
console
.log(data
.message);
this
.receivedMessage = data
.message;
}
}
}
</script>
```
这里展示了怎样通过 `v-on:` 或其
简写的 `
@` 来订阅由 `<child-component>` 发射出来的 `custom-event` 并更新本地状态。
博客围绕Vue.js展开，但具体内容缺失。Vue.js是前端开发中常用的框架，能帮助开发者高效构建用户界面。
扫一扫
711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
