Vue中组件通信的方法

Vue中常用组件通信的方法

1. 父组件传子组件：

   • 父组件通过props的方法传给子组件

   • 子组件定义要从父组件获取的数据为props

   • 父组件在引用子组件中向子组件中定义为props类型的变量传入数据，若为变量可使用v-bind的方式

   • 例如父组件中,test定义在父组件中的data里

     <Hello v-bind:msg="test" msg1="我懂了"/>
     

   • 子组件中

     <script>
     export default {
       name: 'Hello',
       props: {
         msg: String,
         msg1:String
       }
     }
     </script>
     

2. 子组件传父组件：

   • 使用$emit方法

   • 子组件emit，父组件接收

   • <script>
     export default {
       name: 'Hello',
       props: {
         msg: String,
         msg1:String
       },
       methods:{
         go(){
           this.$emit("Changed","传递的值");
         }
       }
     }
     </script>
     

   • <Hello v-bind:msg="test" msg1="我懂了" v-on:Changed="update"/>
     

     export default {
       name: 'App',
       data: function(){
         return{
           test:'这是一个测试'
         }
       },
       methods:{
         update(e){
           this.test = e;
         }
       },
       components: {
         Hello
       }
     }
     </script>
     

3. 使用总线的方法，通过emit消息到总线和从总线中on来实现获取数据，所有组件之间通信都可以使用该方法

   • 编写一个bus.js文件定义一个总线

     import Vue from 'vue'
     export default new Vue()
     
     

   • 在需要组件间通信的地方引入该Bus总线即可，发送消息使用Bus.$emit()\ast \ast ，接收消息使用\ast \ast Bus.$on()，将Bus.$on()放置于mounted中

       mounted(){
         window.console.log('加载')
         Bus.$on('data_test',data => {
           window.console.log(data)
         })
       },
     

     Bus.$emit('data_test',20);
     

4. 使用vuex+localStorage

   • vuex是vue官方推荐的vue状态管理，用于存储数据，不过有一个缺点，在刷新后vuex就会被初始化，数据无法保存。
   • 如果使用vuex+sessionStorage，刷新后可以数据不会别初始化，不过在关闭页面后重新进入则会被初始化，对用户体验不好。
   • 解决方案为vuex+localStorage，将数据存储到localStorage中，再用localStorage赋值到vuex中存储，这样便可长期存储数据，需要注意localStorage的清除，比如在用户退出登录后主动清除保留的数据