Vue生命周期钩子函数、组件传值
一、生命周期函数
1.beforeCreate 创建前执行(data和el都还未初始化)
2.create 完成创建 (完成了data数据初始化,el还未初始化)
3.beforeMount 载入前(完成了data和el数据初始化)
4.mounted 载入后html已经渲染(ajax请求可以放在这个函数中)
5.beforeUpdate 更新前状态(view层的数据变化前,不是data中的数据改变前)
6.update 更新状态后
7.beforeDestroy 销毁前
8.destroy 销毁后 (Dom元素存在,只是不再受vue控制)
二、指令
1.v-model 接收用户输入的一些数据,直接就可以将这些数据 挂载到data属性里面
2.v-if 判断加载固定的内容,若为真加载,为假时删除元素,常用在用在权限管理,页面模块条件加载
3.v-show 元素会始终渲染并保持在dom中,v-show用法和v-if相同,安全性没有v-if高,v-show将元素display设置成none,并不是将元素直接移除。
4.v-else 元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别
5.v-bind 给页面中html属性进行绑定
6.v-on 对页面中的事件进行绑定
事件修饰符 .stop (阻止单击事件冒泡) .prevent (提交事件不再重载页面) .capture (使用事件捕获模式) .self(只当事件在该元素本身(而不是子元素)触发时触发回调)
7.v-for 控制html元素的循环,实现数据列表的生成
8.v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
组件
有全局组件 和 私有组件,组件要写到构造器里面的
全局组件还是要在vue范围内使用,但是任何vue范围都可用
父组件向子组件传值
子组件在props中创建一个属性,用以接收父组件传过来的值
父组件中注册子组件
在子组件标签中添加子组件props中创建的属性
把需要传给子组件的值赋给该属性
子组件向父组件传值
子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
非父子组件、平行对象
如果相互传值的组件都公有一个父组件的话,共同父组件中设定一个data用于储存你要传递的数据,然后两个子组件都通过props连接父组件的这个data,实现一个三方同步。
以上是 Vue生命周期钩子函数、组件传值 的全部内容, 来源链接: utcz.com/z/378381.html