新手小白VUE整理(5) ——组件,生命周期

VUE 2.X

1.在项目中使用组件的步骤

• 创建.vue文件,并注册成组件,示例代码:

比如创建TestCom.vue组件:
<template>
  <div class="container">
 	<p>我是TestCom.vue组件</p>
 </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• 使用import语法导入需要的组件
• 使用components节点注册组件(局部组件)
• 以标签形式使用刚才注册的组件
  示例代码:

<template>
  <div class="container"></div>
  <div class="box">
    // 使用组件
	 <TestCom></TestCom>
  </div>
</template>

<script>
// 引入组件
import TestCom from '@/components/TestCom.vue'
export default {
	data:{
		return {}
	},
	// 注册组件
	components:{
		TestCom // 等同于: "testCom":TestCom,使用的时候名称可以小写,也可以大写,但是建议使用大写,表明是自己引入的组件,而没原生的html标签
	}
}
</script>

<style>

</style>

2.添加路径提示插件

• 搜索VSCode插件:Path Autocomplete
• 添加配置到settings.json配置文件中
  // 导入文件时是否携带文件的扩展名

"path-autocomplete.extensionOnImport":true,
// 配置@的路径提示
"path-autocomplete.pathMappings":{
  "@":"${folder}/src"
}

3.注册全局组件

• 在vue项目的main.js入口文件中,通过Vue.component(),可以注册全局组件.示例代码:

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'
// 参数1:字符串格式,表示组件的注册名称
// 茶树2:需要被全局注册的那个组件
Vue.component('Count',Count);

4.组件的props

• 基本概念
  props是组件的自定义属性,在封装通用组件的时候,合理地使用props可以极大的提高组件的复用性,它的语法格式如下:

export defautl{
  // 组件的自定义属性,允许使用者给自定义属性赋值
  props:['自定义属性1','自定义属性2','自定义属性3',...],
  // 组件的私有数据
  data(){
    return {}
  }
}

• props是只读的
  vue规定:组件中封装的props是只读的,不能直接修改,如果直接修改会报错,如果想修改props中的数据值,那么需要把props中的值转存到data中.
• props默认值
  在声明自定义属性时,将自定义属性定义成一个对象,通过default来定义默认值,示例代码:

export default {
  props:{
    init:{
      default:0
    }
  }
}
注:当用户没有对自定义属性赋值时,默认值才会显示

• props的type值类型
  在声明自定义属性,通过type来定义自定义属性的类型,示例代码:

type值:Number,Boolean,String,Object,Array等

export default {
  props:{
    init:{
      default:0,
      type:Number
    }
  }
}

• props的required属性
  在声明自定义属性,通过required来定义自定义属性是否必填,默认false,示例代码:

export default {
  props:{
    init:{
      default:0,
      type:Number,
      required:true
    }
  }
}

5.组件之前的样式冲突

• 产生原因
  默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题.
  导致组件之间样式冲突的根本原因是:
  1)单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面进行呈现的
  2)每个组件的样式,都会影响整个index.html页面中的DOM元素
• 解决办法
  在style节点中scoped属性
  原理:在style添加scoped属性以后,vue会给当前组件中的每个标签都添加一个随机属性值用来控制样式
  的生效范围.

组件中的样式:
h2{
  color: red;
}
加了scoped以后,实际生成的样式
h2[data-v-3c83f0b7]{  // data-v-3c83f0b7是vue生成的随机属性名
  color: red;
}

6./deep/样式穿透

/deep/ 主要是父组件中改造子组件中样式用到.
主要原理:通过属性选择器并生成相应的后代选择器

组件中的样式:
/deep/ h2{
  color: red;
}
vue实际渲染的样式:
[data-v-3c83f0b7] h2{
  color: red;
}

7.组件的生命周期&生命周期函数

1)生命周期概念

生命周期是指一个组件从创建–>运行–>销毁的整改阶段,强调的是一个时间段

2)生命周期函数

是由vue框架提供的内置函数,会伴随组件的生命周期,自动按次序进行.

3)组件生命周期函数的分类

• 组件创建阶段
  new Vue()–>beforeCreate–>created–>beforeMount–>mounted
• 组件运行阶段
  beforeUpdate–>updated
• 组件销毁阶段
  beforeDestory–>destoryed

4)组件生命周期函数详解

  export default {
  props:{
    info:{
      type:String,
      default:"我是默认值"
    }
  },
  data(){
    return {
      message:"hello,test.vue"
    }
  },
  methods:{
    show(){
      console.log(this.message);
    },
    updateMessage(){
      this.message += '~'
    }
  },
  beforeCreate(){
    // 在当前阶段,组件的props/data/methods尚未被创建,都处于不可用状态 --- 不重要
  },
  // 执行init()方法,加载组件的props/data/methods
  created(){
    // 在该阶段,组件的props/data/methods已创建好,都处于可用状态,但是组件的模板结构尚未完成(html标签还没有被渲染到页面上),不能操作DOM
    // 一般在此阶段发起ajax请求初始化data数据
    // this.show()
    // console.log(this.message)
  },
  beforeMount(){
    // 将要把内存中编译好的HTML结构渲染到浏览器中.此时浏览器中还没有当前组件的DOM结构  --- 不重要
    // console.log('beforeMount...')
    // let h2 = document.getElementsByTagName('h2');
    // console.log(h2)
  },
  mounted(){
    // 已经把内存中的HTML结构成功的渲染到了浏览器之中,此时可以操作DOM元素了.
    // console.log('mounted...')
    // let h2 = document.getElementsByTagName('h2');
    // console.log(h2)
  },
  beforeUpdate(){
    // 数据发生变化之后,将要重新渲染组件的模板结构之前执行该方法
    console.log(this.message)
    console.log('beforeUpdate')
    let text = document.getElementById('testH2').innerHTML
    console.log(text) // 历史DOM数据
    console.log("=================")
  },
  updated(){
    // 数据发生变化之后,并且已经完成了组件DOM结构的重新渲染执行该方法
    console.log(this.message)
    console.log('updated')
    let text = document.getElementById('testH2').innerHTML
    console.log(text) // 新的DOM数据
  },
  beforeDestroy(){
    // 将要销毁组件,但是组件还没有销毁
    // 组件中的所有功能都能正常使用
    console.log('beforeDestroy')
    console.log(this.message)
    console.log(this.info)
    this.show()
    console.log("===============")
  },
  destroyed(){
    // 组件在浏览器中被移除,销毁组件中的监听器,子组件以及事件监听
    // 但是vue实例data,props中的数据,以及methods中的方法仍然可以正常使用
    console.log('destroyed')
    console.log(this.message)
    console.log(this.info)
    this.show()
  }
}

生命周期官方文档:
https://cn.vuejs.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks