vue嵌套组件写法,父子组件传值,兄弟组件传值,兄弟组件用mock模拟axios传值

原创 yinglsc 教程 vue 84阅读 2019-01-15 17:08:26 举报

下面补充了vue2.0之后$refs从父组件直接取子组件的值和子组件传父组件值得区别

先来说目录结构
vue-cli3.0结构

入口main.js

这个是一个兄弟组件通讯的重点,他必须是两个组件通过一个干净的vue当做中转站

app.vue
兄弟组件listen.vue
listen2.vue的子组件(listenSon)

1级根组件 app.vue

2级listen

这个是做兄弟组件传值的demo,里面用了mock模拟axios请求

2级listen2

3级>listen2的子组件listenSon.vue

mock/index.js

总结,
1>父传子就靠在子组件里面直接绑定数据,如:post="post",然后在子组件通过props: ["time", "post"],接收
2>子传父就靠在子组件里面this.$emit("father",this.father);去触发father这个事件;然后父组件页面,需要在当前这个子组件上面绑定事件@father="change",然后在

里面去拿值,然后就能渲染到当前父组件这个页面了,目前只能通过这种方式!
3>兄弟组件之间的传值:首先得先声明一个全局的Vue.prototype.bus=new Vue();作用就是作为中转站可以让兄弟通信;
下来,listen要给listen2传值,就得在listen页面

然后在listen2页面里面去触发

注意这里有个很大的坑

通过上面这种生命周期去绑定以及触发,传值的时候千万要注意一点

触发的生命周期执行时间要在监听之前的毛病

解析:listen的$emit绑定的生命周期mounted必须在listen2的$on绑定的生命周期created的后面,否则就会发生一种效果,浏览器点击刷新按钮(只有第一次会拿值,以后再刷新,就接收不到兄弟组件的传值了)
当然手动视图绑定的@on事件随便你怎么写

另外https://baijiahao.baidu.com/s?id=1610567652632184164&wfr=spider&for=pc
是一个npm的bus插件,里面也是解决组件通讯的封装,说到了

第二点是使用了$bus.on在beforeDestory钩子里应该需要使用$bus.off解除,因为组件销毁后,就没有必要把监听的句柄存储在vue-bus里面了,

补充

$refs从父组件直接取子组件的值

绑定在dom上直接直接打印出这个dom,绑定到子组件上面,会直接打印出子组件上面的dom以及数据

注意:

因为 ref 本身是作为渲染结果被创建的,在初始渲染的时候你不能访问它们 - 它们还不存在!,所以它不是响应式的,不能用在模板或者计算属性中。
所以说,除非是操作dom或者调用子组件方法,一般就不要用ref

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复