Vue.js 是一款流行的前端框架，它允许开发者将复杂的UI拆分成可重用的组件，以提高代码的可维护性和复用性。在本教程中，我们将深入探讨如何在Vue中抽取出组件，并实现父组件向子组件传递值的功能。
让我们看一下如何创建一个组件。在示例中，我们有一个名为`wifiBright`的组件，它主要用于展示一个闪烁的Wi-Fi图标。组件的定义通常包含`template`、`script`和`style`三部分。在`template`中，我们定义了Wi-Fi图标及其样式；在`script`中，我们处理数据和方法，如`data()`用于定义初始数据，`methods`用于定义事件处理函数；`style`用于组件的专属样式。
```html
<template>
<img class="wordLook" :src="imgWifi" width="17%" @click="wifiBrightClick()" />
</template>
<script>
export default {
data() {
return {
imgWifi: require("../../../public/all/wifi0.png"),
intervalIdWifi: "",
time: 0 // 播放时间
};
},
methods: {
wifiBrightClick() {
// ...
}
}
};
</script>
<style scoped>
.wordLook {
/* ... */
}
</style>
```
接下来，我们要将这个组件注册到Vue应用中。注册分为局部注册和全局注册。局部注册是在父组件中引入组件的定义，然后使用`components`属性来声明。而全局注册则是在`main.js`文件中通过`Vue.component()`来实现，这样在任何地方都可以使用该组件。在示例中，我们首先在JS文件中定义了一个名为`wifiBright`的对象，它包含一个`install`方法，然后在`main.js`中使用`Vue.use()`来全局注册：
```javascript
// wifiBright.js
import wifiBrightComponent from './wifiBright.vue';
const wifiBright = {
install: function(Vue) {
Vue.component('wifiBright', wifiBrightComponent);
}
};
export default wifiBright;
// main.js
import wifiBright from './components/wifiBrightComponents';
Vue.use(wifiBright);
```
在父组件模板中，我们可以像下面这样使用这个组件，并通过属性绑定（`v-bind`或`:`）和事件监听（`@`）来传递值和响应事件：
```html
<wifiBright class="wifiLook" ref="wifiBright" @click.native="soundClick()" v-show="showImg"></wifiBright>
```
在这个例子中，`class`、`ref`和`v-show`都是父组件向子组件传递的信息。`@click.native`监听点击事件，调用`soundClick()`方法，而`:showImg`则将`showImg`的数据绑定到子组件的`v-show`指令上，控制组件的显示与隐藏。
总结一下，Vue组件抽离和传值的核心在于：
1. 创建组件模板、脚本和样式。
2. 在父组件中导入并注册组件。
3. 全局注册组件，使其在应用中可被使用。
4. 在父组件模板中通过属性和事件与子组件交互。
这种模块化和组件化的开发方式使得Vue项目变得清晰、可维护，同时也提高了代码的复用性。通过理解并熟练掌握组件抽离和传值，你可以构建出更加复杂且易于管理的Vue应用程序。
