淘先锋技术网

首页 1 2 3 4 5 6 7

前言

最近项目中的多个页面,需要增加一个相同的选项,这个选项内容也不复杂,本是一件很简单的事情,但是为了写出高质量的代码,这明显是需要编写一个通用的子组件,并把它移植到各个页面中。

编写一个通用的子组件,首先需要知悉父子组件的数据先后渲染顺序,如此一来,我们才能正确的地在子组件中,如期获取父组件的值;同样在父组件中,正确如期地获取子组件的值

42e60b1e95e5f11cbf53280d7393cf52.png

生命周期

Vue的生命周期中,我们最常用的生命周期方法,莫过于created、mounted,前者是在web页面初始化时执行,后者是在web页面渲染完毕执行。

本文笔者基于 vue-cli 简单演示下,便可知道其先后顺序

e73f32bc83894302d409b167dd3377ae.png

父组件App.vue

logo.png

子组件HelloWorld.vue

{{ msg }}

For a guide and recipes on how to configure / customize this project,
check out the vue-cli documentation.

Installed CLI Plugins

babel eslint

Essential Links

Core Docs Forum Community Chat Twitter News

Ecosystem

vue-router vuex vue-devtools vue-loader awesome-vue

结果

就像一个钩子一样,亦类似栈的先进后出

22130c1ebade09f1f6ff9b6a660fcc37.png