1、父子组件传值 props $emit
parent.vue
child.vue
另外,通过this.$parent和this.$children可以获取父组件和子组件对象。
ref/refs
另外,ref:如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例,可以通过实例直接调用组件的方法或访问数据。
在上面child.vue中添加sayHello()方法,在parent.vue中updateShow()方法中通过ref调用sayHello()方法。
2、非父子组件传值--provide inject
常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护。
vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题。在provide中指定要传递给子孙组件的数据,子孙组件通过inject注入祖父组件传递过来的数据。
provide 和 inject 主要为高阶插件/组件库提供用例。不推荐直接使用在应用程序代码中是因为数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。
parent.vue
child.vue
child2.vue
输出结果 child2: dlj1 20 girl
从结果可以看出,子孙层provide会覆盖祖父层provide中相同key的属性值。