[JavaScript知识库]vue 生命周期函数、组件数据共享

生命周期函数

1. beforeCreate():不常用，props,data,methods都不能用

2. created（）：常用，经常用来发送ajax请求数据，并把请求到的数据转存到data，供template模板渲染使用，组件模板结构尚未生成，不能操作DOM

3. beforeMounte():不常用，替换el

4. mounted():渲染html结构，可以操作DOM结构

5. beforeUpdate():当data的值改变时，调用他，将要根据最新的数据渲染模板结构，数据data改变，但dom还未改变

6. updated（）：根据最新数据data渲染模板结构以及dom,当数据变化以后，必须把数据写到生命周期函数updated（）里面

7. beforeDestroy（）：将要销毁，尚未销毁，组件正常工作，此后开始销毁子组件，侦听器，事件监听等

8. destroyed():销毁以后，Dom结构完全移除

组件之间的数据共享

1. 父子关系:

   1. 父向子传递数据：自定义属性props：子组件声明自定义属性，父组件绑定数据

      <template>
        <Son :mes="message" :user="userinfo"></Son>
      </template>
      
      <script>
      import Son from './Son.vue';
      export default {
          data() {
              return {
                  message: '我是父组件的message',
                  userinfo: {
                      name: '刘德华',
                      age:18
                  }
              }
          },
          components: { Son }
      }
      </script>
      
      <style>
      
      </style>

      <template>
        <div>
          <h5>我是Son组件</h5>
          <p>父组件传过来的message是：{{mes}}</p>
          <p>父组件传递过来的userinfo是：{{user}}</p>
        </div>
      </template>
      
      <script>
      export default {
          // 不建议修改props里面的值，只读
          props: [
              'mes',
              'user'
          ]
          
                 
      }
      
      </script>
      
      <style>
      
      </style>

   2. 子向父传递数据：自定义事件$emit(),

      1. 在子组件中定义$emit()函数

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

      2. 在父组件中为子组件添加自定义事件

               <!-- 在父组件中为子组件添加自定义事件 -->
               <Right @countchange="getcount"></Right>

      3. 在父组件中定义接受子组件数据的值和方法

          // 定义接收子组件count的值
            data（）{
         countFromSon:0
         } 
         methods(){
         // 子组件count变化，触发$emit自定义事件，调用getcount函数
             getcount(val) {
             this.countFromSon=val
           }
         }

2. 兄弟关系

   1. 在数据发送方定义要传送的数据

      data() {
          // 数据发送方要传送的数据
          mes:'我是Left组件的message'
        }

   2. 在数据的接收方定义要接收的数据

      data() {
          return {
            count: 0,
            // 定义数据接受方要接收的数据
            mesFromLeft:0
          }
        },

   3. 创建eventBus.js模块，并向外共享一个Vue实例对象

      import Vue from "vue";
      
      // 向外共享vue实例
      export default new Vue()

   4. 在数据发送方调用bus.$emit('事件名称’，要发送的数据）方法，触发自定义事件

      methods: {
          sendMsg() {
            bus.$emit('send',this.message)
          }
        }

   5. 在数据接收方调用bus.$on('事件名称’，要接收的数据）方法，注册一个自定义事件

      created() {
          bus.$on('share',(val)=>{this.mesFromLeft=val})
        }