vue-parent-child-lifecycle-order

vue parent child lifecycle order

live demo

https://99kyx.csb.app/

https://codesandbox.io/s/vue-parent-child-lifecycle-order-99kyx

https://vue-parent-child-lifecycle-order.stackblitz.io

https://stackblitz.com/edit/vue-parent-child-lifecycle-order

<template>
<div class="parent">
<h2>{{ title }}</h2>
<button @click="toggleShow">ToggleShow</button>
<ChildComponent v-if="show"/>
</div>
</template> <script>
import log from "../utils/log";
import ChildComponent from "./child";
export default {
name: "ParentComponent",
components: {
ChildComponent,
},
props: {
msg: String,
},
data() {
return {
title: "parent-lifecycle-order",
show: true,
};
},
methods: {
toggleShow() {
const { show } = this;
this.show = !show;
},
},
beforeCreate() {
log(`parent beforeCreate`, 1)
},
created() {
log(`parent created`, 2)
},
beforeMount() {
log(`parent beforeMount`, 3)
},
mounted() {
log(`parent mounted`, 4)
},
beforeUpdate() {
log(`parent beforeUpdate`, 5)
},
updated() {
log(`parent updated`, 6)
},
beforeDestroy() {
log(`\nparent beforeDestroy`, 7)
},
destroyed() {
log(`parent destroyed`, 8)
},
// catch error
};
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h2 {
margin: 30px 0 0;
}
</style>

<template>
<div id="app">
<h1>vue-parent-child-lifecycle-order</h1>
<button @click="toggleShow">ToggleShow</button>
<ParentComponent v-if="show"/>
</div>
</template> <script>
import ParentComponent from "./components/parent";
export default {
name: "App",
components: {
ParentComponent,
},
data() {
return {
show: true,
};
},
methods: {
toggleShow() {
const { show } = this;
this.show = !show;
},
},
};
</script> <style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


vue-parent-child-lifecycle-order的更多相关文章

  1. [NHibernate]Parent/Child

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  2. vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

    vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit

  3. 服务启动Apache服务,错误Parent: child process exited with status 3 -- Aborting.解决

    不能启动apache,或者使用wamp等集成包后,唯独apache服务启动后有停止,但是把东西搬到其他机器上却没事问题可能和网络有关,我查了很多资料首先找打apache的错误报告日志,发现现实诸多的调 ...

  4. [Vue] Parent and Child component communcation

    By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...

  5. Vue Parent Send Ajax Data to Child Component

    Vue 父组件ajax异步更新数据,子组件props获取不到 2018年06月26日 09:25:06 哎哟嘿 阅读数 3585   当父组件  axjos  获取数据,子组件使用  props  接 ...

  6. XPath学习:parent,child

    XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...

  7. Vue 生命周期LIFECYCLE是8个吗?

    vue生命周期钩子个数是:11个. export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounte ...

  8. csharp: DataRelation objects to represent a parent/child/Level relationship

    /// <summary> /// /// </summary> /// <param name="sender"></param> ...

  9. react-parent-child-lifecycle-order

    react-parent-child-lifecycle-order react parent child lifecycle order live demo https://33qrr.csb.ap ...

随机推荐

  1. bootstrap 轮播图带缩列图两端对齐,并自动换行然后左对齐!

    禁止自动轮播 data-interval="false" 完整代码如下: 1 <!DOCTYPE html> 2 <html> 3 4 <head&g ...

  2. Maven 依赖机制

    概述 在 Maven 依赖机制的帮助下自动下载所有必需的依赖库,并保持版本升级.让我们看一个案例研究,以了解它是如何工作的.假设你想使用 Log4j 作为项目的日志.这里你要做什么? 传统方式 访问 ...

  3. TCP 延迟

    https://mp.weixin.qq.com/s/fKWJrDNSAZjLsyobolIQKw 直击案发现场!TCP 10倍延迟的真相是? 原创 蛰剑 阿里技术 2019-11-01      

  4. LINUX动态库(.SO)搜索路径(目录)设置方法

    LINUX动态库(.SO)搜索路径(目录)设置方法 [root@VM_0_11_centos ld.so.conf.d]# cat /etc/ld.so.confinclude ld.so.conf. ...

  5. Python 学习笔记(1)

    Mac下载安装Python mac 系统自带有python .但就最新的mac系统而言,它自带的python版本为2.*版本. 虽然不影响对于老python项目的运行,但3.*版本中很多语法都发生了改 ...

  6. 内网渗透之信息收集-linux

    linux     系统信息         grep MemTotal /proc/meminfo #查看系统内存总量         cat /etc/issue #查看系统名称         ...

  7. Django(ORM单表操作)

    默认使用sqllite数据库 修改为mysql数据库 创建数据库 在app models中编写创建数据库类 from django.db import models class Book(models ...

  8. apache和LAMP架构

    资源池: httpd依赖包:apr 和 apr-util 下载:点击这里 httpd 下载:点击这里 mysql 下载:点击这里 php 下载: 点击这里 本章资源: 点击这里 资源提取码:u2jv ...

  9. cassandra权威指南读书笔记--安全

    认证和授权driver,JMX和cassandra服务器支持SSL/TLS,cassandra节点间也支持SSL/TLS.密码认证器cassandra还支持自定义,可插拔的认证机制.默认的认证器:or ...

  10. workflow定时任务部分失败

    workflow遇到一个问题,每天定时任务导致部分失败,截图如下 目前这个问题现场出现过是重启wf解决的 ,但是也给研发排查了,根本原因不清楚,不确保现场还会再遇到.