Tips:一些笔记2023/1/21SUNDAY人生的真相

  Tips:一些记录,一些笔记

  2023/1/21

  SUNDAY

  人生的真相是这样的:

  我敢骂世界,骂上帝;

  我毁谤佛祖,我睥睨天下;

  但是我不敢骂路过的行人 和 每个周末都在装修的邻居。

  —— 李诞(脱口秀)

  js获取兄弟节点_js获取所有兄弟节点_js 获取兄弟节点

  01

  Vue.JS:组件的生命周期

  生命周期(Life Cycle)是指一个组件从 创建、运行js获取兄弟节点,到销毁的整个过程,它强调的是一个【时间段】。

  生命周期函数:

  Vue框架提供的内置函数,会伴随着组件的生命周期,自动地按序执行。

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

  js获取所有兄弟节点_js 获取兄弟节点_js获取兄弟节点

  具体如下:

  组件创建阶段

  new Vue()

  构造函数

  beforeCreate

  创建前

  created

  已创建

  beforeMount

  挂载(渲染页面)前

  mounted

  已挂载(渲染)

  组件运行阶段

  beforeUpdate

  数据更新前

  updated

  已更新

  组件销毁阶段

  beforeDestroy

  实例销毁前

  destroyed

  已销毁

  02

  生命周期图示(Life Cycle)

  Vue.JS官方给出了「生命周期图示」:

  Vue.JS官方的介绍:

  下图展示了实例的生命周期。你不需要立马弄明白所有的东西,不过随着你的不断学习和使用,它的参考价值会越来越高。

  具体如下:

  js获取所有兄弟节点_js 获取兄弟节点_js获取兄弟节点

  一个Vue.JS的组件js获取兄弟节点,本质上也是一个Vue.JS的实例。

  其中:

  created()

  这个方法非常常用,经常会用这个方法中发送Ajax请求,获取初始数据,并把请求的数据转存到data中,以供template模板渲染使用。

  beforeMount()

  将要把内存中编译好的HTML结构渲染到浏览器中;

  Create vm.$el and replace 'el' with it

  用内存中编译生成的HTML结构替换掉el属性指定的DOM元素

  mounted()

  已经把内存中的HTML结构,成功的渲染到了浏览器中,这个时候浏览器中已经包含了当前组件的DOM结构;

  如果要操纵DOM,最早只能在这个阶段执行。

  beforeUpdate()

  将要根据变化过后、最新的数据,重新渲染组件的模板结构

  Virtual DOM re-render and patch

  根据最新的数据,重新渲染组件的DOM结构

  03

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

  组件之间的关系:

  在项目开发中,组件之间最常见的关系:父子关系、兄弟关系;

  js获取所有兄弟节点_js 获取兄弟节点_js获取兄弟节点

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

  【父组件向子组件传递数据】可以通过子组件的自定义属性;

  js 获取兄弟节点_js获取兄弟节点_js获取所有兄弟节点

  【子组件修改父组件中的数据】:但是实际开发中,不应该这么操作

  js获取所有兄弟节点_js 获取兄弟节点_js获取兄弟节点

  【子组件向父组件传递数据】

  子组件向父组件共享数据,需要使用自定义事件,具体方法如下:

  js 获取兄弟节点_js获取所有兄弟节点_js获取兄弟节点

  代码:

  子组件:Right.vue

  <pre class="code-snippet__js" data-lang="xml"> `` Right 组件`` 子组件的Count:【{{ count }}】`` Add`` `` ` export default {`` data() {`` return {`` // 子组件自己的数据`` // 后续会将子组件的这个数据传递给父组件`` count: 0`` }`` },`` methods: {`` add() {`` this.count ++`` `` // 自定义事件`` this.$emit('countChange', this.count)`` }`` }``} ` .right-container {`` padding: 0 20px 20px;`` background-color: lightskyblue;`` min-height: 250px;`` flex: 1;`` }</pre>

  父组件:Main.vue

  <pre class="code-snippet__js" data-lang="xml"> `` 根组件: Main.vue`` `` The Three-Body Problem / 三体问题`` `` 从子组件「Right.vue」接受的数据 count:【{{ countFromRight }}】`` `` `` `` `` `` `` `` `` `` ` ``// 使用组件:1. 导入需要的组件``import Left from '@/components/Left.vue';``import Right from '@/components/Right.vue';``import LifeCycle from '@/components/LifeCycle.vue';`` ``export default {`` data () {`` return {`` countFromRight: 0`` }`` },`` // 使用组件:2. 注册组件`` components: {`` "left": Left,`` 'right': Right,`` 'lifecycle': LifeCycle`` },`` methods: {`` updateCountFromRight(newVal) {`` this.countFromRight = newVal`` }`` }``} ` .app-container {`` pedding: 1px 20px 20px;`` background-color: #efefef;`` }`` .box {`` display: flex;`` }</pre>

  在浏览器中查看执行效果:

  js 获取兄弟节点_js获取兄弟节点_js获取所有兄弟节点

  04

  组件之间的数据共享:兄弟组件

  在Vue.JS 2.x中,兄弟组件之间的数据共享是通过「EventBus」实现的。

  js获取兄弟节点_js 获取兄弟节点_js获取所有兄弟节点

  步骤:

  1

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

  2

  在数据的发送方,通过【bus.$emit('事件名称', 要发送的数据)】方法,触发自定义事件

  3

  在数据的接收方,通过【bus.$on('事件名称', 事件处理函数)】方法,注册一个自定义事件

  例子:兄弟组件之间的数据共享

  项目结构:

  js 获取兄弟节点_js获取兄弟节点_js获取所有兄弟节点

  创建【src/eventBus.js】

  <pre class="code-snippet__js" data-lang="javascript">import Vue from "vue";` // 向外共享Vue的实例对象export default new Vue()`</pre>

  发送方组件【Left.vue】

  <pre class="code-snippet__js" data-lang="xml"> `` Left 组件`` `` `` 向「Right.vue」发送数据``        `` `` ` ``// 导入 eventBus``import bus from "@/eventBus.js"`` ``export default {`` data() {`` return {`` str: "「剑气纵横三万里一剑光寒十九洲」古龙《三少爷的剑》"`` }`` },`` methods: {`` sendStr() {`` bus.$emit('shareData', this.str)`` }`` }``} ` .left-container {`` padding: 0 20px 20px;`` background-color: orange;`` min-height: 250px;`` flex: 1;`` }`` h3 {`` color:red;`` }`` `` /deep/ h5 {`` color: blue;`` }</pre>

  接收方组件【Right.vue】

  <pre class="code-snippet__js" data-lang="xml"> `` Right 组件`` `` 来自节点 「Left.vue」 的数据【{{ strFromLeft }}】`` `` `` `` 子组件的Count:【{{ count }}】`` Add`` `` ` //导入 eventBus``import bus from "@/eventBus.js"`` ``export default {`` data() {`` return {`` // 子组件自己的数据`` // 后续会将子组件的这个数据传递给父组件`` count: 0,`` `` // 来自兄弟节点的数据`` strFromLeft: ""`` }`` },`` methods: {`` add() {`` this.count ++`` `` // 自定义事件`` this.$emit('countChange', this.count)`` }`` },`` created() {``        // 数据的接收方绑定自定义事件`` bus.$on('shareData', newVal => {``            // 将自定义事件传递过来的数据,转存到本实例的属性中`` this.strFromLeft = newVal`` })`` }``} ` .right-container {`` padding: 0 20px 20px;`` background-color: lightskyblue;`` min-height: 250px;`` flex: 1;`` }</pre>

  浏览器查看运行效果:

  js 获取兄弟节点_js获取兄弟节点_js获取所有兄弟节点

  然后,点击发送:

  js获取兄弟节点_js获取所有兄弟节点_js 获取兄弟节点

  修改发送方文本框中的内容,然后再次点击发送:

  js获取兄弟节点_js获取所有兄弟节点_js 获取兄弟节点

  可以看到,兄弟组件之间的数据共享成功。

  END

  温馨提示

  如果你喜欢本文,请分享到朋友圈,想要获得更多信息,请关注我。

文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/1594
0 评论
536

发表评论

!