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 ...
随机推荐
- Vue3 源码之 reactivity
注: 为了直观的看到 Vue3 的实现逻辑, 本文移除了边缘情况处理.兼容处理.DEV环境的特殊逻辑等, 只保留了核心逻辑 vue-next/reactivity 实现了 Vue3 的响应性, rea ...
- 能够满足这样要求的哈希算法有很多,其中比较著名并且应用广泛的一个哈希算法,那就是MurmurHash 算法。尽管这个哈希算法在 2008 年才被发明出来,但现在它已经广泛应用到 Redis、MemCache、Cassandra、HBase、Lucene 等众多著名的软件中。
能够满足这样要求的哈希算法有很多,其中比较著名并且应用广泛的一个哈希算法,那就是MurmurHash 算法.尽管这个哈希算法在 2008 年才被发明出来,但现在它已经广泛应用到 Redis.MemCa ...
- http2 http1 对比
RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) https://tools.ietf.org/html/rfc7540#page-4 ...
- macro-name replacement-text 宏 调试开关可以使用一个宏来实现 do { } while(0)
C++ 预处理器_w3cschool https://www.w3cschool.cn/cpp/cpp-preprocessor.html C++ 预处理器 预处理器是一些指令,指示编译器在实际编译之 ...
- Linux slabtop命令——显示内核片缓存信息
Linux内核需要为临时对象如任务或者设备结构和节点分配内存,缓存分配器管理着这些类型对象的缓存.现代Linux内核部署了该缓存分配器以持有缓存,称之为片.不同类型的片缓存由片分配器维护. slabt ...
- Linux常用命令详解(第三章)(ping、kill、seq、du、df、free、date、tar)
本章命令(共7个): 1 2 3 4 5 6 7 8 ping kill seq du df free date tar 1." ping " 作用:向网络主机发送ICMP(检测主 ...
- 如何将下载到本地的JAR包手动添加到Maven仓库,妈妈再也不用担心我下载不下来依赖啦
我们有时候使用maven下载jar包的时候,可能maven配置都正确,但是部分jar包就是不能下载下来,如果maven设置都不正确的,可以查看我的maven系列文章,这里仅针对maven配置正确,但是 ...
- jvm系列二内存结构
二.内存结构 整体架构 1.程序计数器 作用 用于保存JVM中下一条所要执行的指令的地址 特点 线程私有 CPU会为每个线程分配时间片,当当前线程的时间片使用完以后,CPU就会去执行另一个线程中的代码 ...
- ES6(四)用Promise封装一下IndexedDB
indexedDB IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据,它可以被网页脚本创建和操作. IndexedDB 允许储存大量数据,提供查找接口,还能建立索引,这些都是 ...
- jRating五星评级
<!DOCTYPE html> <html> <head> <title>jrating使用示例</title> <meta char ...