vue组件

1.为什么要进行组件化

•提升代码的可读性
•极大的降低了各个功能的耦合性，降低了维护的难度
•耦合度的降低，提高了系统的可扩展性
•多人协同开发，减少了代码冲突，提升了迭代效率

2.组件是什么

vue组件就是我们预先定义好的标签，一个组件的基本框架是这样的：

也是分为template：html模版，script：js逻辑，style：css样式

3.注册方式

全局注册

import Vue from 'vue'
import HelloOyo from './components/HelloOyo'
import demoComponent from './components/demoComponent'

Vue.component('HelloOyo', HelloOyo)
Vue.component('DemoComponent', demoComponent)

一般是在main.js中引入然后进行全局的组件注册，全局方式注册的组件，可以用于之后创建的所有（通过 new Vue 创建的）Vue 根实例，Vue 实例组件树中所有子组件的内部

局部注册

import ComponentA from './ComponentA.vue’
import ComponentC from ./ComponentC’ 
export default {
	components: {
		ComponentA,
		ComponentC,
		},
		// ...
}

在父组件中引入子组件并且进行注册，父组件可以使用子组件，类似

<CompomemtA></CompomemtA>

4.组件的复用

<div>
	<CompomemtA></CompomemtA>
	 <CompomemtA></CompomemtA>
 	<CompomemtA></CompomemtA>
</div>

组件可以进行多次重复使用

5.组件间通过props进行传值

子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：

静态传递：

<template>//父组件
 <div>
 <h1>我是父组件！</h1>
 <child message="我是子组件一！"></child> //通过自定义属性传递数据
 </div>
</template>
<script>
import Child from '../components/child.vue'
export default {
 components: {Child},
}
</script>


<template>//子组件
 <h3>{{message}}</h3>
</template>
<script>
 export default {
 props: ['message'] //声明一个自定义的属性
 }
</script>

动态传递：
使用v-bind来实现动态的（表达式，布尔值，对象等类型的值）

 <!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
 <child v-bind:message="a+b"></child>
 
 <!-- 用一个变量进行动态赋值。-->
 <child v-bind:message="msg"></child>

单项数据流
•所有 props 都在子组件和父组件之间形成一个单向往下流动的数据绑定：当父组件中的属性更新时，数据就会向下流动到子组件，但是反过来，子组件属性更新时，父组件并不会感知到子组件的数据变化。这种机制可以防止子组件意外地修改了父组件的状态，造成应用程序的数据流动变得难于理解。
•此外，每次父组件更新时，子组件中所有的 props 都会更新为最新值。也就是说，你不应该试图在子组件内部修改 prop。如果你这么做，Vue 就会在控制台给出警告。

6.组件通信

父组件向子组件传值

前面已经说过了，使用props进行传值

子组件向父组件传值

$emit 方法进行通信

$emit其实就是绑定了一个事件，当这个事件被执行到的时候，就会把预定义的参数传给父组件，注意这里预定时的函数是mounted，详细去看vue的生命周期
子组件

<template>
    <div>我是子组件</div>
</template>
<script>
    export default {
        name: "child",
        mounted:function () {
            this.$emit('getMessage','我$是父组件')
        }
    }
</script>

<style scoped>

</style>

父组件

  <template>
      <div>
        <h1>{{title}}</h1>
      <child @getMessage="showmsg"></child>
      </div>
    </template>
    
    <script>
    
    import child from '../components/child'
    export default {
      components: {
        child,
      },
      data(){
        return{
          title:'',
        }
      },
      methods:{
        showmsg(title){
          this.title=title;
        }
      }
    }
    </script>
    
    <style>
    </style>

子组件之间进行的传值

使用bus进行兄弟组件的传值
参考：https://www.cnblogs.com/place-J-P/p/7586819.html

•import Vue from ‘vue’
•export default new Vue()
•通过实例一个vue实例Bus作为媒介
•Bus.$onBus.$off Bus.$emit