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. Vue3 源码之 reactivity

    注: 为了直观的看到 Vue3 的实现逻辑, 本文移除了边缘情况处理.兼容处理.DEV环境的特殊逻辑等, 只保留了核心逻辑 vue-next/reactivity 实现了 Vue3 的响应性, rea ...

  2. 能够满足这样要求的哈希算法有很多,其中比较著名并且应用广泛的一个哈希算法,那就是MurmurHash 算法。尽管这个哈希算法在 2008 年才被发明出来,但现在它已经广泛应用到 Redis、MemCache、Cassandra、HBase、Lucene 等众多著名的软件中。

    能够满足这样要求的哈希算法有很多,其中比较著名并且应用广泛的一个哈希算法,那就是MurmurHash 算法.尽管这个哈希算法在 2008 年才被发明出来,但现在它已经广泛应用到 Redis.MemCa ...

  3. http2 http1 对比

    RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2) https://tools.ietf.org/html/rfc7540#page-4 ...

  4. macro-name replacement-text 宏 调试开关可以使用一个宏来实现 do { } while(0)

    C++ 预处理器_w3cschool https://www.w3cschool.cn/cpp/cpp-preprocessor.html C++ 预处理器 预处理器是一些指令,指示编译器在实际编译之 ...

  5. Linux slabtop命令——显示内核片缓存信息

    Linux内核需要为临时对象如任务或者设备结构和节点分配内存,缓存分配器管理着这些类型对象的缓存.现代Linux内核部署了该缓存分配器以持有缓存,称之为片.不同类型的片缓存由片分配器维护. slabt ...

  6. 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(检测主 ...

  7. 如何将下载到本地的JAR包手动添加到Maven仓库,妈妈再也不用担心我下载不下来依赖啦

    我们有时候使用maven下载jar包的时候,可能maven配置都正确,但是部分jar包就是不能下载下来,如果maven设置都不正确的,可以查看我的maven系列文章,这里仅针对maven配置正确,但是 ...

  8. jvm系列二内存结构

    二.内存结构 整体架构 1.程序计数器 作用 用于保存JVM中下一条所要执行的指令的地址 特点 线程私有 CPU会为每个线程分配时间片,当当前线程的时间片使用完以后,CPU就会去执行另一个线程中的代码 ...

  9. ES6(四)用Promise封装一下IndexedDB

    indexedDB IndexedDB 是一种底层 API,用于在客户端存储大量的结构化数据,它可以被网页脚本创建和操作. IndexedDB 允许储存大量数据,提供查找接口,还能建立索引,这些都是 ...

  10. jRating五星评级

    <!DOCTYPE html> <html> <head> <title>jrating使用示例</title> <meta char ...