【精讲】vue 生命周期函数及子传父方法二

目录

生命周期函数的引出是

子传父方法二

---

第一部分：生命周期函数的引出是：

<!-- 生命周期
          1，又名：生命周期回调函数，生命周期钩子
          2，是什么：vue在关键时刻帮我们调用的一些特殊名称的函数
          3，生命周期函数的名字不可更改，但函数的具体内容是程序员根据 需求辨析的
          4，生命周期函数中的this指向是vm 或组件实例对象
          -->
        
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- opacity透明度 -->
            <h2 :style="{opacity}">欢迎学习vue</h2>
        </div>
        
        <script type="text/javascript">
        const vm =    new Vue({
                el:'#root',
                data:{
                    opacity:1
                },
                methods:{
                    
                },
                // 这里需要放在methods后面
                // vue完成模板的解析并把初识的真实dom元素放入页面后(挂载完毕)调用mounted
                // 只解析一次
                mounted() {
                    setInterval(()=>{
                        this.opacity-=0.01
                        if(this.opacity <= 0){
                            this.opacity =1
                        }
                    },18)
                }
            })
        // 设置一个定时器,自动的去降低透明度等到小于等于0时，则重新赋值等于1
        // setInterval(()=>{
        //     vm.opacity-=0.01
        //     if(vm.opacity <= 0){
        //         vm.opacity =1
        //     }
        // },18)
        </script>

具体图例及方法等解析见图例，点击下方链接查询：生命周期讲解

API — Vue.js

第二部分：子传父方法二

简介：父传子不仅可以采用$emit，也可以采用props去传，很多人肯定会有疑问，props不是父传子吗？也可以进行子传父，回答：对的；接下来，博主就带你实现子传父的第二种方法，利用props实现。在讲述之前呢，我们会给定一个图例，让大家更好的了解什么是子传父，第二种方法实现的路径是什么？

 

 通过上方的图例可以看出实现路径：

 下面是子：

 

下面是父：

 

了解更多或者疑惑点，可私信博主。