Vue组件通信的几种实现方法(2)

代码中我们可以看到我们再组件A中设置了一个provide:{name:"Aresn"},这个方法的作用就是将该变量提供给所有的子组件。我们在B组件中我们使用indect获取了这个变量,这样我们就可以使用this.name获取到这个那么变量。下面我们可以使用一些骚操作大胆的替代Vuex。(这里说明一下官网中不建议我们是使用这两个API在常规应用程序中,建议使用在高阶组件中,建议归建议用的好就可以啦)

使用provide / inject期待Vuex

<template> <div> <router-view></router-view> </div> </template> <script> export default { } </script> Vue cli中搭建出来的项目结构中都会有一个app.vue作为入口组件,我们可以使用这个API在上面大做文章。 <script> export default { provide () { return { app: this } }, data () { return { userInfo: null } }, methods: { getUserInfo () { // 这里通过 ajax 获取用户信息后,赋值给 this.userInfo,以下为伪代码 $.ajax('/user/info', (data) => { this.userInfo = data; }); } }, mounted () { this.getUserInfo(); } } </script>

这里我们把根组件实例作为一个参数传递给app变量,下面我们就可以通过app[变量||方法]达到vuex的目的

<template> <div> {{ app.userInfo }} </div> </template> <script> export default { inject: ['app'], methods: { changeUserInfo () { // 这里修改完用户数据后,通知 app.vue 更新,以下为伪代码 $.ajax('/user/update', () => { // 直接通过 this.app 就可以调用 app.vue 里的方法 this.app.getUserInfo(); }) } } } </script>

但是这样做有一个弊端那就是可能会让根组件app.vue的代码变得特别的臃肿,当然也有解决办法,我们可以使用mixins混合的方式将不同的逻辑分开写到不同的js里面然后通过 mixins: [mixins_user]的方式在app.vue中引用这个mixin。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/24daaaa87ddabbaed673044e7f03cab0.html