vue-parent-child-lifecycle-order
vue-parent-child-lifecycle-order
vue parent child lifecycle order
live demo
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的更多相关文章
- [NHibernate]Parent/Child
系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...
- vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
vue $parent 的上一级 有可能不是父组件,需要好几层$parent 如果这样 还不如用 this.$emit
- 服务启动Apache服务,错误Parent: child process exited with status 3 -- Aborting.解决
不能启动apache,或者使用wamp等集成包后,唯独apache服务启动后有停止,但是把东西搬到其他机器上却没事问题可能和网络有关,我查了很多资料首先找打apache的错误报告日志,发现现实诸多的调 ...
- [Vue] Parent and Child component communcation
By building components, you can extend basic HTML elements and reuse encapsulated code. Most options ...
- Vue Parent Send Ajax Data to Child Component
Vue 父组件ajax异步更新数据,子组件props获取不到 2018年06月26日 09:25:06 哎哟嘿 阅读数 3585 当父组件 axjos 获取数据,子组件使用 props 接 ...
- XPath学习:parent,child
XPath 是一门在 XML 文档中查找信息的语言.XPath 可用来在 XML 文档中对元素和属性进行遍历. XPath 是 W3C XSLT 标准的主要元素,并且 XQuery 和 XPointe ...
- Vue 生命周期LIFECYCLE是8个吗?
vue生命周期钩子个数是:11个. export const LIFECYCLE_HOOKS = [ 'beforeCreate', 'created', 'beforeMount', 'mounte ...
- csharp: DataRelation objects to represent a parent/child/Level relationship
/// <summary> /// /// </summary> /// <param name="sender"></param> ...
- react-parent-child-lifecycle-order
react-parent-child-lifecycle-order react parent child lifecycle order live demo https://33qrr.csb.ap ...
随机推荐
- C#高级编程第11版 - 第八章 索引
[1]8.1 引用方法 1.委托是指向方法的.NET地址变量. 2.委托是类型安全的类,定义了返回类型和参数类型.委托类不单单只包含一个方法引用,它也可以保存多个方法的引用. 3.Lambda表达式直 ...
- C++ Primer Plus读书笔记(六)分支语句和逻辑运算符
1. 以上均包含在cctype中 1 #include<cctype> 2 //#include<ctype.h> 2.文件操作 (1)头文件 1 #include<fs ...
- Docker+Prometheus+Alertmanager+Webhook钉钉告警
Docker+Prometheus+Alertmanager+Webhook钉钉告警 1.环境部署 1.1 二进制部署 1.2 docker部署 1.2.1 webhook 1.2.2 alertma ...
- ACCESS数据库偏移注入
偏移注入主要是针对知道表,但是不知道字段的ACCESS数据库. 比如我们已经知道了表名是 admin 判断字段数: http://192.168.74.136:8002/Production/PROD ...
- 码一次前后台post请求交互,以及接口的使用,json数据格式的传递
近几天,公司疯狂加班,然后补做了很多功能,很多东西虽然是自己熟悉的,但是却不会上手,动手实践能力仍需加强,对此对一些代码记录,留待学习和总结. 简单描述功能 具体实现 前台JSP.JS.后台actio ...
- Spring Boot 两种多数据源配置:JdbcTemplate、Spring-data-jpa
多数据源配置 JdbcTemplate支持 Spring-data-jpa支持 多数据源配置 创建一个Spring配置类,定义两个DataSource用来读取application.propertie ...
- 我用了半年的时间,把python学到了能出书的程度
Python难学吗?不难,我边做项目边学,过了半年就通过了出版社编辑的面试,接到了一本Python选题,并成功出版. 有同学会说,你有编程基础外带项目实践机会,所以学得快.这话不假,我之前的基础确实加 ...
- 2019牛客暑期多校训练营(第二场) H-Second Large Rectangle(单调栈)
题意:给出由01组成的矩阵,求求全是1的次大子矩阵. 思路: 单调栈 全是1的最大子矩阵的变形,不能直接把所有的面积存起来然后排序取第二大的,因为次大子矩阵可能在最大子矩阵里面,比如: 1 0 0 1 ...
- HDU-6148 Valley Number (数位DP)
当一个数字,从左到右依次看过去数字没有出现先递增接着递减的"山峰"现象,就被称作 Valley Number.它可以递增,也可以递减,还可以先递减再递增.在递增或递减的过程中可以出 ...
- 2019牛客多校 Round7
Solved:5 Rank:296 E Find the median (线段树) 题意:最开始一个空的数组 4e5次操作 每次把Li,Ri中的每个数插入进来 问当前的中位数 题解:把这n个区间离散化 ...