• 理解组件的概念和作用
• 封装创建组件能力
• 实现组件之间通信

Vue组件

基本使用

场景：在直接复制标签模块下的显示控制按钮使用同一变量，受其它模块的影响

而使用vue组件，模块之间互不影响而且复用高

<template>
	<div>
        <Pannel></Pannel>
        <Pannel></Pannel>
    </div>
</template>
<script>
    import Pannel from './components/Pannel'
    export default:{
        Pannel:Pannel
    }
</script>

组件是可复用的 vue 实例，封装标签、样式和Js代码

组件化：封装的思想，把页面上 可重复用的部分 封装为 组件 ，从而方便项目的开发和维护

使用步骤

1. 创建组件

2. 注册组件

   局部注册

   import Pannel from './URL'
   export default{
   	components:{
   		组件名:组件对象
   	}
   }
   

   全局注册

   import Pannel from './URL'
   Vue.component("组件名",Pannel)
   

3. 使用组件

   <组件名></组件名>

scoped作用过程

给 style 标签加 scoped 属性

• 当前组件内标签都会被替换成 data-v-hash 属性
• css选择器根据属性选择器渲染 ，所以只对当前页面起作用

组件通信

基本使用

引入的组件称之为子组件，父模块向子模块传入值

• 子组件定义接收变量

  <template>
  <p>{{title}}</p>
  </template>
  export default {
   	props:['title','price','intro']
  }
  

• 父模块发送数据

  <Product title="1" price="2" intro="3"></Product>
  

循环传参数

<Product v-for="obj in list" :key="obj.id" :titl="obj.proname" 
         :price="obj.price" :intro="obj.info"></Product>

单向数据流

子组件改父模块传入的数据不通知父模块，数据会有不一致问题

vue 规定 props 本身不允许重新赋值

从父模块到子组件的数据流向，叫做单向数据流

正确数据传递方法

1. 父组件内，绑定自定义事件和处理函数

   <Product v-for="(obj,index) in list" :key="obj.id" :titl="obj.proname" 
   :price="obj.price" :intro="obj.info" :index="index"
            @subprice="fn"></Product>
   <script>
   	methods:{
           fn(index,price){
               this.list[index].proprice>1&&(this.list[index].proprice)=(this.list[index].proprice-price).toFixed(2))
           }
       }
   </script>
   

2. 子组件内，恰当的时机，触发父模块的自定义事件

   <button @click="kanFn">
       砍价
   </button>
   methods:{
   	kanFn(){
   		this.$emit('subprice',this.index,1)
   	}
   }
   

组件之间的通信

基于上面例子实现

• 创建 src/EventBus/index.js 空白 vue 对象

  import Vue from 'vue'
  export default new Vue()
  

  使用这个创建的模块做组件之间通信的桥梁

• 在接收值的组件 eventBus.$on

  import eventBus from '../EventBus'
  export default{
  	props:['arr'],
  	created(){
  		eventBus.$on('send',(index,price)=>{
  			this.arr[index].proprice = price;
  		})
  	}
  }
  

• 在传递值的组件 eventBus.$emit

  import eventBus from '../EventBus'
  export default {
  	methods:{
  		kanFn(){
  			eventBus.$emit('send',this.index,this.price-1)
  		}
  	}
  }
  

文件：List.vue(右边列表)、Myproduce_sub.vue(页面展示)、App.vue

两个组件之间的通信

todo案例

• 页面搭建
• 铺设任务列表
• 添加任务
• 删除任务
• 统计、筛选显示任务
• 清楚已完成
• 本地存储
• 全选按钮