组件通信
1、父传子
父组件:<div :message="data"></div> // 动态绑定值用v-bind 例子中的“:”为简写
子组件:props: ['data'] // 在数据中用传过来的值,不能随意更改
注:** props的值是单项流动的,并不会从子组件返回父组件。
具体参考:https://www.jb51.net/article/117447.htm
2、子传父
子组件用$emit来向父组件派发事件,
父组件中用$on来监听自定义的事件
3、兄弟通信
a.在父组件data中在实例化一个vue实例
b.在子组件A中 $emit触发传值
c.在子组件B创建的钩子函数中用$on接收值
生命周期:
- 1、什么时候使用
beforeCreate ------ el和data并未初始化
created -------------- el没有,data初始化
beforeMount ------- data初始化,el未挂载
mounted ------------ 挂载完成(也就是模板中的HTML渲染到了HTML页面中)
beforeUpdate ------ 更新前
updated -------------- 更新后
beforeDestroy ------ 销毁前
- 2、怎么使用?
beforeCreate:可以在这里加一个loading
created:loading结束做一些初始化操作
mounted:ajax请求,配合路由钩子做一些事情
beforeDestory:你确认删除吗?
destoryed:当前组件已被删除,清空相关内容
- 3、created和mounted的区别:
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。