Vue组件看这篇就够了

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

侦听器-watch

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

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

2. 事例：

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

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

   事例：

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

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

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

组件

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

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

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

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

4. 注册组件：

   • 全局注册：（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组件生效

组件通信

0. 子组件中通过props来定义变量的，props可以随意使用变量，用法同data

1. Props 单项数据流：如果是父组件传递给子组件的数据，不能在子组件中直接修改，如果修改，父组件无法收到更新的

2. Vue规定，props里面的变量，本身是只读的，要修改父组件的值，必须要修改父组键

3. 子传父：

   0. 现在父组件内，绑定自定义事件和事件处理函数 @自定义事件名= '父methods里函数名'
   1. 子组件，恰当的实际（触发的时候），触发父给我绑定的自定义事件，导致父methods里面事件处理函数执行