vue了解

vue.png

组件通信

1、父传子

父组件：

// 动态绑定值用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节点进行一些需要的操作。

具体可参考：
https://mp.weixin.qq.com/s/r74cHaSwIdzr_IBzZcxpUg