vue学习笔记（3）

vue组件

• 组件化：就是把页面中可以复用的ui结构封装为组件，从而方便项目的开发和维护
• 组件的后缀名都是.vue
• vue组件存放在components目录下
• 组件由三部分构成：
  • template：组件的模板结构
  • script：组件的Javascript行为
  • style：组件的样式

1、使用组件的三个步骤

• 步骤1：使用import语法导入需要的组件
• 步骤2：使用components节点注册组件
• 步骤3：以标签形式使用注册的组件

2、全局组件

• 通过components注册的是私有子组件
  • 在组件A的components节点下，注册了组件F，则组件F只能在组件A中使用，不能被用在组件C中
• 注册全局组件
  • 在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件

3、props

• props是组件的自定义属性，在分装通用组件的时候，合理运用props可以极大提高组件的复用性
• 语法格式： props:[‘自定义属性A’ , ‘自定义属性B’ , ‘自定义属性C’ , ……]
• props的使用:以标签形式使用组件的时候，在标签上给定初始值 例如：

<myCount init="6"></myCount>

• 上条赋值方式中，init的值是一个字符。可以使用v-bind绑定属性值 例如：
• props中的值，vue 中规定，组件封装的自定义属性是只读的，程序员不能直接修改props的值
• 在声明自定义属性时，可以通过default来定义属性的默认值 代码示例如下：

export default{
        props:{
            init:{
                //用default属性定义属性的默认值
                default:0
            }
        }
    }

• 声明自定义属性时，可以通过type来定义属性的值类型 代码示例如下：

 export default{
            props:{
                init:{
                    //用default属性定义属性的默认值
                    default:0
                    //用type来规定必须传递什么类型的值
                    type:Number
                }
            }
        }

• 声明自定义属性时，可以通过required设置为必填项，规定用户必须传递该属性，否则报错 代码示例如下：

    export default{
            props:{
                init:{
                    //用default属性定义属性的默认值
                    default:0,
                    //用type来规定必须传递什么类型的值
                    type:Number,
                    //必填项验证
                    required:true
                }
            }
        }

4、组件之间的样式冲突

• 默认情况乱下，写在.vue组件中的样式会全局生效，容易造成多个组件之间的样式冲突
• 可以使用scoped解决该冲突 示例：

::v-deep h6{
        color:pink
        }

5、组件的生命周期

• 组件的生命周期：创建–运行–销毁
• 生命周期函数：由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行
  • 组件创建阶段
    • beforeCreate
    • created 常用 可以在这个阶段调用methods中的方法，请求服务器数据；把请求的数据，转到data中，供template模板渲染的时候用
    • beforeMount
    • mounted 常用 如果要操作DOM元素，最早只能在mounted阶段执行
  • 组件运行阶段
    • beforeUpdate
    • updated 常用 当数据变化之后，为了操作最新的dom结构
  • 组件销毁阶段
    • beforeDestroy
    • destroyed

组件之间的数据共享

• 父组件向子组件共享数据
  • 需要使用自定义属性
  • 不要修改props的值
• 子组件向父组件共享数据
  • 使用自定义事件
    • 步骤1：修改数据时，通过$emit()触发自定义事件

 this.$emit( 'numchage' , this.count )

    - 步骤2：父组件调用子组件

<Son @numchage="getNewCount"></Son>

    - 步骤3：父组件methods中定义

  getNewCount(val){ this.countFromSon = val }

• 兄弟组件之间的数据共享
  • vue2.x中，兄弟组件的数据共享方案是EventBus
    • 创建eventBus.js模块，并向外共享一个vue示例对象
    • 数据发送方，调用bus.$emit(‘事件名称’ ， 要发送的数据)方法触发自定义事件
    • 数据接收方，调用bus.$on(‘事件名称’ ， 事件处理函数)方法注册一个自定义事件 一般在created函数中调用

ref

1. 认识ref

+ ref:辅助开发者在不使用jQuery的情况下，获取DOM元素或组件的引用
+ 每个vue实例上，都包含一个$refs对象，里面存储这对应的DOM元素或组件的引用。默认情况下，组件的$refs指向一个空对象

2. 使用ref引用DOM

+ 步骤1：在DOM元素中，给ref添加一个属性，例： <h1 ref="myh1">我是DOM元素</h1>
+ 步骤2：获取  this.$refs.myh1
+ 步骤3：使用  this.$refs.myh1.style.color = 'red'

3. 使用ref引用组件

+ 步骤1：在使用的子组件中，添加一个ref自定义属性，例：<left ref="comleft">我是组件</left>
+ 步骤2：在父组件中，获取子组件  this.$refs.comleft
+ 步骤3：在父组件中，通过获得的方法或者值，对子组件进行操作  this.$refs.comleft.resetCount()   resetCount()是组件left中的方法