VUE基础-叁

Vue生命周期 & 数据共享

组件的生命周期

1、生命周期&生命周期函数

**生命周期（Lief Cycle）**是指一个组件从 创建 –> 运行 –> 销毁 的整个阶段，强调的是一个时间段。

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

注意：

生命周期强调的时时间段

生命周期函数强调的是时间点

2、组件生命周期函数的分类

3、生命周期图示

可以参考vue广丰文档给出的 “生命周期图示”，进一步理解组件生命周期指定的全过程：

Vue 实例 — Vue.js (vuejs.org)生命周期图示

组件之间的数据共享

1、组件之间的关系

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

• 父子关系
• 兄弟关系

2、父子组件之间的数据共享

父子组件之间的数据共享又分为：

• 父 –> 子 共享数据
• 子 –> 父 共享数据

父组件先子组件共享数据

父组件先子组件共享数据需要使用自定义属性。

示例代码如下：

// 父组件 

<Son :msg="message" :info="userInfo"></Son>

data() {
    return {
        message: 'Hello Vue',
        userInfo: {
            username: 'zhangsan',
            age: 18,
            gender: '男'
        }
    }
}

// 子组件

<template>
    <div>
        <h4>Msg的值是: {{ msg }}</h4>
        <h4>Info的值是: {{ info }}</h4>
    </div>
</template>

<script>
    export default {
        props: ['msg', 'info']
    }
</script>

子组件向父组件共享数据

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

示例代码如下：

// 子组件

export default {
    data() {
        return {
            // 子组件自己的数据 将来希望把 count 值传给父组件
            count: 0
        }
    },
    methods: {
        add() {
            this.count += 1
            // 修改数据时，通过 $emit() 触发自定义事件
            this.$emit('numchange', this.count)
        }
    }
}

// 父组件

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

export default {
    data() {
        return {
            // 定义数据项接收子组件传递过来的值
            countFromSon: 0
        }
    },
    methods: {
        getNewCount(val) {
            this.countFromSon = val
        }
    }
}

兄弟组件之间的数据共享

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

EventBus的使用步骤

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

ref引用

什么是ref引用

ref用来辅助开发者在 不依赖Jquery 的情况下，获取DOM元素或组件的引用。

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

<!-- 使用ref属性，为对应的组件添加引用名称 -->
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="getRef">打印 this</button>
  </div>
</template>

<script>
export default {
  methods: {
    getRef() {
      // 当前APP组件的一个实例对象
      console.log(this);
    }
  }
}
</script>

使用ref引用DOM元素

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

<!-- 使用ref属性，为对应的组件添加引用名称 -->
<template>
  <div class="app-container">
    <h1 ref="myh1">App 根组件</h1>
    <button @click="getRef">获取 $refs 引用</button>
  </div>
</template>

<script>
export default {
  methods: {
    getRef() {
      // 通过 this.$refs.引用的名称 可以引用组件的实例
      console.log(this.$refs.myh1);

      // 引用到组件的实例之后，就可以调用组件上的 methods 方法
      this.$refs.myh1.style.color = 'red';
    }
  }
}
</script>

使用ref引用组件实例

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

<!-- 使用ref属性，为对应的组件添加引用名称 -->
<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <MyRef ref="comMyRef"></MyRef>
    <button @click="getRef">获取 $refs 引用</button>
  </div>
</template>

<script>
export default {
  methods: {
    getRef() {
      // 通过 this.$refs.引用的名称 可以引用组件的实例
      console.log(this.$refs.comMyRef);

      // 引用到组件的实例之后，就可以调用组件上的 methods 方法
	  this.$refs.comMyRef.add();
    }
  }
}
</script>

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

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

示例代码如下：

<template>
    <input type="text" v-if="inputVisible" ref="iptRef">
    <button v-else @click="showInput">展示输入框</button>
</template>

export default {
  data() {
    return {
      // 控制输入框和按钮的按需切换
      // 默认值为false表示为默认展示按钮，隐藏输入框
      inputVisible: false,
    };
  },
  methods: {
    // 点击按钮展示输入框
    showInput() {
      // 展示文本框
      this.inputVisible = true;
    }
  }
};
</script>

让文本框自动获得焦点

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

示例代码如下：

<template>
  <div class="app-container">
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

export default {
  data() {
    return {
      // 控制输入框和按钮的按需切换
      // 默认值为false表示为默认展示按钮，隐藏输入框
      inputVisible: false,
    };
  },
  methods: {
    // 点击按钮展示输入框
    showInput() {
      // 展示文本框
      this.inputVisible = true;

      // 让展示出来的文本框自动获得焦点
      this.$refs.iptRef.focus();
    },
    showButton() {
      this.inputVisible = false;
    }
  }
};
</script>

this.$nextTick(cb) 方法

组件的 $nextTick(cb) 方法，会把 cb 回调推迟到下一个 DOM 更新周期之后执行。通俗的理解是：等组件的 DOM 更新完成之后，再执行 cb 回调函数。从而能保证 cb 回调函数可以操作到最新的 DOM 元素。

<template>
  <div class="app-container">
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="showInput">展示输入框</button>
  </div>
</template>

  methods: {
    // 点击按钮展示输入框
    showInput() {
      // 展示文本框
      this.inputVisible = true;

      // 让展示出来的文本框自动获得焦点
      // 延迟对文本框的操作，延迟到下次 DOM 更新之后
      this.$nextTick(() => {
        this.$refs.iptRef.focus();
      })
    },
    showButton() {
      this.inputVisible = false;
    }
  }

/button>

methods: {
// 点击按钮展示输入框
showInput() {
// 展示文本框
this.inputVisible = true;

  // 让展示出来的文本框自动获得焦点
  // 延迟对文本框的操作，延迟到下次 DOM 更新之后
  this.$nextTick(() => {
    this.$refs.iptRef.focus();
  })
},
showButton() {
  this.inputVisible = false;
}

}