vue生命周期&数据共享

组件的生命周期

生命周期&生命周期函数

生命周期：是指一个组件从创建--运行--销毁的整个阶段，强调的是一个时间段

生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点

组件生命周期函数的分类

生命周期图示

生命周期图示，进一步理解组件生命周期执行的过程

组件之间的数据共享

组件之间的关系

在项目开发中，组件之间最常见的关系分为如下两种：

父子关系
兄弟关系

父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性，示例代码如下：

//父组件
 <!-- 使用标签形式使用导入的组件 -->
    <Left :msg="message" :user="info"></Left>
    <!-- 给子组件传递信息 -->
    //父向子传递的数据
    data(){
    return{
      message:'西红柿一定能当程序员',
      info:{name:'西红柿', age:21},

//子组件

 <p>信息{{ msg }},表单{{ user }}</p> 
    <!-- 使用父组件传来的值 -->
export default {
  //用来接收父组件传来的值
  props:['msg','user'],    
    }

子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件

//子组件
 methods:{
    add(){
      //让子组件的count值自增+1
      this.count +=1
      //把自增的结果传给父组件
      //数据修改时，触发自定义事件
      this.$emit('userchange',this.count)
    }
  }
}

//父组件
  <Right @userchange="adds"></Right>
   <!-- 使用自定义事件定义方法名称接收数据 -->
   //定义方法
   adds(val){
        console.log('numchange 事件被触发了',val)
        this.message2 +=1
      },

兄弟组件之间的数据分享

在vue2.x中，兄弟组件之间数据共享的方案是EventBus

EventBus的使用步骤

创建evenybus.js模块，并向外共享一个Vue的实例对象
在数据发送方，调用Bus.$emit('事件名称'，要发送的数据)方法触发自定义事件
在数据接收方，调用bus.$on('事件名称'，事件处理函数)方法注册一个自定义事件

ref引用

ref 引用概念

辅助开发者获取DOM元素或组件的引用

每个vue组件的实例上，都包含一个 $ref对象，里面存储着对应的DOM元素或组件的引用，默认情况下，组件的$ ref指向一个空对象

使用ref引用DOM元素

如果想要使用ref引用页面上的DOM元素，则可以按照如下的方式进行操作：

使用ref引用组件实例

如果想要使用ref引用页面上的组件实例，则可以按照如下的方式进行操作：

ref引用案例

控制文本框和按钮的按需切换

通过布尔值inputVisible 来控制组件的中的文本框原牛的按需切换

2. 让文本框自动获取焦点

当文本框展示出来之后，如果希望他立即获得焦点，则可以为其添加ref引用，并调用原生DOM对象的.focus()方法即可

this.$nextTick(回调函数)方法

组件的$nextTick()方法，会把回调函数推迟到下一个DOM更新周期之后执行

vue基础3