1.首先来看vue提供的方式,父组件通过props向子组件传值,子组件可以向父组件通过 this.$emit("method", "value") 的方式向父组件传值,上码。
父组件:
子组件:
这里父组件import引入ui-mask子组件后,通过在标签上使用hidden向子组件传值,然后子组件通过props:{hidden}来接收父组件传过来的值,之后就可以通过hidden来控制自己的class啦,其中的type是指明接受父组件传入值得类型,default是为了设置一个默认值,这里也就是父传子了。
很多时候子组件也需要向父组件传值,这里来看子组件,可以看到子组件上面有个click方法(capture、self为修饰符,可忽略),然后方法里面用了this.$emit(“dialog-click”,"dialogClick OK"),联想到前面提到了this.$emit("method", "value") 的方式,可以理解为在子组件定义了一个dialog-click的事件,第二个参数“dialogClick OK”可以理解为为事件传入的值,然后父组件就可以使用dialog-click的事件了,通过@dialog-click事件使用maskClick方法通过传入的参数val父组件就能获取到子组件传入的值了,有木有很简单啊。
知道父子组件传值之后就可以编写一些使用的组件啦。
2.vue里面互通信息当然少不了vuex了,把数据放入state里面之后就能通过vue的计算属性computed里面获取state里面的值了,想要更改的时候就通过dispatch调用对应的actio方式更改state里面的值了。
3.除了上面这种官方的方法之外,当然还有其他方法了,像一些全局的的方法或者变量都能实现父子组件之间的信息交换,所以如果把变量赋到wndow上面,那么获取值就简单了,所以sessionStorage、localStorage、cookie都可以实现值得取赋了。不过这种方式当然不推荐了,因为vue里面的数据是响应式的,这种方式只能取得一次,就是最初始的一次,后面就只有躺着了。