Vue组件通信的六种方式

前言

组件是 vue.js 最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。
方法一 props/$emit
1. 父组件向子组件传值

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用，后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: 'App',
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}
//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值，然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>

2. 子组件向父组件传值

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3.兄弟传值
在src中新建一个Bus.js的文件，然后导出一个空的vue实例

定义一个点击按钮，点击发送组件B里的数据

在传输数据的一方引入Bus.js 然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递

<template>
  <div class="A">
    <button @click="add">A按钮</button>
  </div>
</template>
 
<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      msg: "我是组件A的数据",
    };
  },
  mounted() {},
  methods: {
    add() {
      bus.$emit("add", this.msg);
    },
  },
};
</script>

在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

<template>
  <div class="B">
    B组件
    <h3>{{ data }}</h3>
  </div>
</template>
 
<script>
import bus from "../bus/bus";
export default {
  props: [],
  data() {
    return {
      data: "",
    };
  },
  mounted() {
    bus.$on("add", (data) => {
      this.data = data;
    });
  },
  methods: {},
  computed: {},
  components: {},
  watch: {},
};
</script>

4.vuex
简要介绍 Vuex 原理
Vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 进行，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。
在 store/index.js写入：

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  strict:true,  // 开启严格模式  确保state 中的数据只能 mutations 修改
  state:{
    count:0
  }
})
 
export default store;

在main.js中引入：

import store from './store'
 
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
}）

此时可以在组件中使用 this.$store.state.count 获取store中state的值。如：

<template>
  <div class="hello">
    <h2>{{count}}</h2>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  }
}
</script>

很多时候咱们要对state里的值进行操作，在vuex提供了一个方法mutations

mutations用法(使用mutations可以修改state的值)

在store/index.js中写入：

state:{
    count:0
  },
  mutations:{ // 更改数据的方法
    add(state){
      state.count++
    },
    //提交载荷用法
//     add(state,n){  
//      state.count += n
//    },
    sub(state){
      state.count--
    }
}

在组件中使用mutations中对应的方法

<template>
  <div class="hello">
    <button @click="add">+</button>
    <h2>{{count}}</h2>
    <button @click="sub">-</button>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  computed:{
     count(){
       return this.$store.state.count;
     }
  },
    methods:{
    add(){
      this.$store.commit('add');
    },
    
    //提交载荷用法
   // add(){  
   //    this.$store.commit('add',10);
   // },
   
   //对象风格的提交方式
   //   store.commit({
   //     type: 'add',
   //     n: 10
   //     })
   
    sub(){
      this.$store.commit('sub');
    }
  }
}
</script>

此时就可以对count进行修改了
5.路由传参
在跳转页面的时候，在js代码中的操作如下，在标签中使用标签

this .$router.push({
                         name:  'routePage' ,
                         query/ params : {
                             routeParams:  params
                         }

6.localStorage和sessionStorage
setItem存储value
用途：将value存储到key字段
用法：.setItem( key, value)
代码示例：
sessionStorage.setItem(“key”, “value”); localStorage.setItem(“site”, “asd”);

getItem获取value
用途：获取指定key本地存储的值
用法：.getItem(key)
代码示例：
var value = sessionStorage.getItem(“key”); var site = localStorage.getItem(“site”);