生命周期和数据共享

　　组件的生命周期

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

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

　　 1.3组件生命周期函数的分类

　　组件之间的关系

　1.1父子组件之间的数据共享

1.1.1父-- >子共享数据使用自定义属性

　　父组件

　　子组件

　 1.1.2 子--> 父共享数据使用自定义事件

子组件

　　父组件

<script>
import Left from "@/components/Left.vue";
import Right from "@/components/Right.vue";

export default {
  
  data() {  
    return {
      message: "hello 131",
      userinfo: { name: "wsc", age: 18 },
      //定义来接受子组件来接受传递过来的数据
      countFromSon: 0,
    };
  },
  mothods: {
    // 获取子组件传过来的数据
    getNewCount(val) {
      this.countFromSon = val;
    },
  },
  //注册组件
  components: {
    Left,
    Right,
  },
};
script>

　　1.2兄弟之间的数据共享是通过Eventbus

　　1.2.1创建eventbus.js模块，并向外共享一个vue的实例对象

import Vue from "vue"
export default new Vue()

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

<script>
//发送方
//导入eventBus
 import bus from './eventBus.js'
export default {
    props:['msg','user'],
    data(){
        //发送方要发送的数据
        str:'我与春风皆过客,你携秋水揽星河'

    },
    methods:{
        send(){
            //通过eventBus来发送数据 
            bus.$emit('share',this.str)
        }
    }

}
script>

　　1.2.3在数据接受方，调用bus.$on('事件名称'，事件处理函数)方法注册一个自定义的事件

<script>
//接收方
//导入eventBus
 import bus from './eventBus.js'
export default {
  data(){
    return{
        //子组件自己的数据，将来把count值传给父组件
        count:0,

        //接收方接收发送方发来的数据
        strFromLeft:''
    } 
  },
  mounteds:{
      add(){
          //绕让子组件count值自增加1
          this.count+=1
          //把自增的结构传给父组件
          this.$emit('numchange',this.count)
      }
  },
  created(){
    //为bus绑定自定义事件’
    bus.$on('share',(val)=>{
      this.strFromLeft=val
    })
  }
}
script>

　　 ref 引用

　　1.1ref 用来辅助开发者在不依赖于 jQuery 的情况下，获取 DOM 元素或组件的引用，每个 vue 的组件实例上，都包含一个 $refs 对象，里面存储着对应的 DOM 元素或组件的引用。默认情况下，

组件的 $refs 指向一个空对象　　1.2使用ref引用页面的DOM元素

<template>
  <div id="app-container">
    <h1 ref="myh1">app组件h1>
    <button @click="showThis">打印 thisbutton>
    <hr />
    <div class="box">div>
  div>
template>

<script>
export default {
  methods: {
    showThis() {
      //当前app的组件对象
      this.$refs.myh1.style.color = "red";
    },
  },
};
script>

　　1.3使用ref引用组件实例

父组件
<template>
  <div id="app-container">
    <h1 ref="myh1">app组件h1>
    <button @click="showThis">打印 thisbutton>
    <button @click="onReset">重置left组件中count值为0button>
    <hr />
    <div class="box">div>
    <Left ref="comLeft">Left>
  div>
template>

<script>
import Left from '@/components/Left.vue'
export default {
  methods: {
    showThis() {
      //当前app的组件对象
      this.$refs.myh1.style.color = "red";
    },
    //点击按钮重置
    onReset(){
      // this.$$refs.comLeft.resetCount()
      tis.$refs.comLeft.count=0

    }
  },
   components:{
     Left
   }
};
script>

子组件
<template>
  <div class="left-container">
    <h3>Left 组件-----{{ count }}h3>
    <button @click="count += 1">+1button>
    <button @click="resetCount">重置button>
  div>
template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    resetCount() {
      this.count = 0;
    },
  },
};
script>

　　this.$nextTick(cd) 方法

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

<template>
  <div id="app-container">
    

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

<script>
export default {
  data() {
    return {
      //控制输入框和按钮的切换，默认值为false表示默认展示按钮，隐藏输入框
      inputVisible: false,
    };
  },
  methods: {
    showInput() {
      this.inputVisible = true;
      //让展示出来的文本框，自动获取焦点
      this.$nextTick(() => {
        this.$refs.iptRef.focus();
      });
    },
    showButton() {
      this.inputVisible = false;
    },
  },
};
script>

生命周期和数据共享

相关

标签