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. C#高级编程第11版 - 第八章 索引

    [1]8.1 引用方法 1.委托是指向方法的.NET地址变量. 2.委托是类型安全的类,定义了返回类型和参数类型.委托类不单单只包含一个方法引用,它也可以保存多个方法的引用. 3.Lambda表达式直 ...

  2. C++ Primer Plus读书笔记(六)分支语句和逻辑运算符

    1. 以上均包含在cctype中 1 #include<cctype> 2 //#include<ctype.h> 2.文件操作 (1)头文件 1 #include<fs ...

  3. Docker+Prometheus+Alertmanager+Webhook钉钉告警

    Docker+Prometheus+Alertmanager+Webhook钉钉告警 1.环境部署 1.1 二进制部署 1.2 docker部署 1.2.1 webhook 1.2.2 alertma ...

  4. ACCESS数据库偏移注入

    偏移注入主要是针对知道表,但是不知道字段的ACCESS数据库. 比如我们已经知道了表名是 admin 判断字段数: http://192.168.74.136:8002/Production/PROD ...

  5. 码一次前后台post请求交互,以及接口的使用,json数据格式的传递

    近几天,公司疯狂加班,然后补做了很多功能,很多东西虽然是自己熟悉的,但是却不会上手,动手实践能力仍需加强,对此对一些代码记录,留待学习和总结. 简单描述功能 具体实现 前台JSP.JS.后台actio ...

  6. Spring Boot 两种多数据源配置:JdbcTemplate、Spring-data-jpa

    多数据源配置 JdbcTemplate支持 Spring-data-jpa支持 多数据源配置 创建一个Spring配置类,定义两个DataSource用来读取application.propertie ...

  7. 我用了半年的时间,把python学到了能出书的程度

    Python难学吗?不难,我边做项目边学,过了半年就通过了出版社编辑的面试,接到了一本Python选题,并成功出版. 有同学会说,你有编程基础外带项目实践机会,所以学得快.这话不假,我之前的基础确实加 ...

  8. 2019牛客暑期多校训练营(第二场) H-Second Large Rectangle(单调栈)

    题意:给出由01组成的矩阵,求求全是1的次大子矩阵. 思路: 单调栈 全是1的最大子矩阵的变形,不能直接把所有的面积存起来然后排序取第二大的,因为次大子矩阵可能在最大子矩阵里面,比如: 1 0 0 1 ...

  9. HDU-6148 Valley Number (数位DP)

    当一个数字,从左到右依次看过去数字没有出现先递增接着递减的"山峰"现象,就被称作 Valley Number.它可以递增,也可以递减,还可以先递减再递增.在递增或递减的过程中可以出 ...

  10. 2019牛客多校 Round7

    Solved:5 Rank:296 E Find the median (线段树) 题意:最开始一个空的数组 4e5次操作 每次把Li,Ri中的每个数插入进来 问当前的中位数 题解:把这n个区间离散化 ...