我们在开发的时候不免会遇到在某个页面内，点击某个地方的时候需要打开或者跳到某个组件上，这时我们就需要父子组件间的通信了。当然如果你只是改变子组件的某个值，你使用vuex就行了，但是很多情况你可能还需要调用子组件中的某个方法，改变子组件的状态等等。而且用vuex的时候，不知道你们有没有试过改变一个数组，数组里面的个数没有变，但是内容变了，而vue这时并没有更新页面的渲染(我就是因为这个原因使用了父子组件通信，用了之后发现挺好用的，有些事情也会方便很多，例如我可以在子组件写好一个初始化方法，每次跳到这个组件的时候调用，如果在钩子函数里面写的话只有这个组件创建的时候才会执行)。
上面说了那么多，下面来点干货吧：
首先是父组件调用子组件的
父组件需要在你使用的子组件中添加一个ref属性，里面的值随你定义，调用的时候需要一样
使用子组件
然后调用的时候如下图二，settingConfig是子组件里面的方法，可以传参数，不过值得一说的是如果你是调用该方法的时候子组件尚未创建则会报错，这里做了一个报错的处理。
调用子组件方法
最后只需要写上你调用的方法就可以了
子组件方法
上面就是父组件调用子组件方法，很简单吧，那继续看下去你会发现子组件调用父组件的更加简单
子组件调用父自己方法
还是先说父组件吧：在子组件上加上一个事件，事件名随便起，实现对应的方法就好了，也可以传参
使用子组件
事件触发的方法
子组件只需要做一件事，就是触发事件
子组件触发change事件
子组件调用父组件方法就这样子完了
希望需要用到的可以帮助到你，学无止境，大家一起加油!
网友评论