第三次学习记录

ref

本页面获取dom元素

<template>
  <div id="app">
    <div ref="testDom">11111</div>
    <button @click="getTest">获取test节点</button>
  </div>
</template>

<script>
export default {
  methods: {
    getTest() {
      console.log(this.$refs.testDom)
    }
  }
};
</script>

获取子组件中的data
子组件

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

调用子组件中的方法
将msg改为方法即可
子组件调用父组件方法
子组件

<template>
  <div>
</div>
</template>
<script>
export default {
  methods: {
    open() {
      console.log("调用了");
      //  调用父组件方法
      this.$emit("refreshData");
    }
  }
}
</script>

父组件

<template>
  <div id="app">
    <HelloWorld ref="hello" @refreshData="getData"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open()
    },
    getData() {
      console.log('')
    }
  }
};
</script>

用ref调用子组件的方法时触发父组件的自定义事件，进而调用父组件的方法

全局事件总线

main.js中

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this
  }
}).$mount('#app')

接收数据的组件中

mounted() {
    this.$bus.$on('deleteMylist',this.deleteMylist)
    this.$bus.$on('checkMylist',this.checkMylist)
    this.$bus.$on('updatemsg',this.updatemsg)
  },

传输数据的组件中

handleBlur(Mymsg,e){
        this.$bus.$emit('updatemsg',Mymsg.id,e.target.value)
     }

高阶js

原型

每个构造函数都有一个原型对象（实例的原型），原型有一个constructor属性指回构造函数，而实例有一个内部指针指向原型。在chrome、firefox、safari浏览器环境中这个指针就是__proto__，其他环境下没有[[Prototype]]的标准方式。

并发并行

并发：在操作系统中，某一时间段，几个程序在同一个CPU上运行，但在任意一个时间点上，只有一个程序在CPU上运行。 并发解决了程序排队等待的问题，如果一个程序发生阻塞，其他程序仍然可以正常执行。
并行：当操作系统有多个CPU时，一个CPU处理A线程，另一个CPU处理B线程，两个线程互相不抢占CPU资源，可以同时进行，这种方式成为并行。

同步与异步

同步：是阻塞模式，是按顺序执行，执行完一个再执行下一个，需要等待，协调运行；
异步：是非阻塞模式，无需等待，异步是彼此独立，在等待某事件的过程中，继续做自己的事，不需要等待这一事件完成后再工作。
同步回调:立即执行,完全执行完了才结束,不会放入回调队列中
pop push shift unshift reverse concat splice
JS执行机制(Event loop)