Vue组件看这篇就够了

侦听器-watch

1. 作用：可以侦听data/compute属性值的变化，只要修改了就会触发函数执行,可以侦听Vue的变量

2. 语法：watch:{}和data(){并齐同级

3. 事例：

   	watch:{
   		"要侦听的属性名"（newval，oldval）{//newval是现在的值  oldval是之前的值
   
   		}
   	}
   

4. 侦听器深度侦听（侦听对象）

   事例：

    watch:{
   		"要监听的属性名"{
   			deep：true，//深度监听是否开启  
   			handler（newval，oldval）{//newval是修改后的值  oldval是修改前的值
   				
   			}
   		}
   	}
   

   深度侦听的时候，oldval无法获取到之前的值，这是vue2官方的一个bug，此时oldval的值就等于newval的值

5. 应用：当数据每次修改需要缓存的时候，利用侦听器进行触发localStorage.setIteam（）进行存储

组件

1. 不用组件弊端：项目中一个功能需要复用时，直接复制代码，效率太低了，复用性很差。

2. 含义：将一段重复的业务功能，封装标签、样式和js代码

3. 优势：各自独立，便于复用。

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

5. 注册组件：

   • 全局注册：（main.js中）

     import Vue from 'vue'
     import 组件对象 from 'vue文件对象'
     
     Vue.component("组件名",组件对象)
     

     一般用注册的组件名来作为标签名，也支持”-“的连接方式转小写321`

   • 局部注册：（某.vue文件内）

       import 组件对象 from 'vue文件路径'
       export default {
         components:{
           "组件名":组件对象
         }
     

scoped作用

• 作用：给style添加scoped，解决多个组件样式名相同, 冲突问题

• 原理：1. 他给组件内标签都被添加data-v-hash值的属性

  ​ 2.给所有的选择器都加上属性选择器

style上加scoped, 组件内的样式只在当前vue组件生效

组件通信

1. 子组件中通过props来定义变量的，props可以随意使用变量，用法同data
2. Props 单项数据流：如果是父组件传递给子组件的数据，不能在子组件中直接修改，如果修改，父组件无法收到更新的
3. Vue规定，props里面的变量，本身是只读的，要修改父组件的值，必须要修改父组键
4. 子传父：
   1. 现在父组件内，绑定自定义事件和事件处理函数 @自定义事件名= '父methods里函数名'
   2. 子组件，恰当的实际（触发的时候），触发父给我绑定的自定义事件，导致父methods里面事件处理函数执行