Vue组件学习、组件通信

1. 了解组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

组件是可复用的 Vue 实例，且带有一个名字：在以下例子中是 。它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项没有。

<div id="components-demo">
  <button-counter></button-counter>
</div>

组件的特点：

• 组件可以进行无数次的复用
• 组件的data必须是一个函数，确保每一个实例可以维护一份data返回的对象的独立拷贝，使得任何一个组件的改变不会影响到其他被复用的组件。
  举个例子：Header.vue组件同时被a.vue和b.vue复用，data写成函数形式能让Header.vue在每一个页面中的引用形成一个独立的复用，在a.vue中修改Header的data值，不会对b.vue中的Header造成影响。这就是我们必须要把组件的data写成函数形式的原因，确保组件的独立复用，数据深拷贝。

2. 创建组件

2.1. 使用vue-cli创建vue项目

（见vue-cli手脚架创建vue项目详细步骤）

2.2 全局定义组件

1. 创建vue文件，找到项目下的components目录，在这里创建组件，我创建好了Footer.vue，Header.vue
   
2. 找到main.js文件,全局注册组件Vue.component(‘component-a’, { /* … */ })
   
   注册：

import Vue from 'vue'
import App from './App.vue'
// 引入组件路径
import Header from '@/components/Header'
import Footer from '@/components/Footer'
// 全局注册组件 vue.component()
Vue.component('Header',Header)
Vue.component('Footer',Footer)

Vue.config.productionTip = false

new Vue({
   
  render: h => h(App),
}).$mount('#app')

2.3 局部定义组件

1. 创建vue文件，找到项目下的components目录，在这里创建组件，我创建好了Footer.vue，Header.vue
   

2. 创建好vue文件之后，在app中全局注册，在app.vue中的script标签引入，注册的组件只能在当前app.vue中使用。

script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'

export default {
   
  name: 'App',
  //局部注册
  components: {
   
    Header,
    Footer,
  }，
}
</script>

3. 组件间通信/交互/传值

组件间通信分类可以分成：

1. 父组件与子组件之间的通信
2. 兄弟组件之间的通信
3. 非关系组件之间的通信
   

1. 父组件与子组件之间的通信

1. 父组件传给子组件：

props传递数据：子组件设置props属性，定义接收父组件传递过来的参数

props的两种定义格式:

props:[]  //定义为数组，数组中每一项都是变量