vue中的组件通信

1.父传子 prop

在父组件的子组件标签上绑定一个属性，挂载要传输的变量

<template>
  <div class="father">
    <h1>父组件</h1>
    <Son :toSon="msg"></Son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return {
      msg: "父传子",
    };
  },
};
</script>

在子组件中通过props来接收数据，props可以是一个数组也可以是一个对象，接收过来的数据可以直接使用

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是从父组件接收的值：{{ toSon }}</p>
  </div>
</template>

<script>
export default {
  //   props: ["toSon"],
  props: {
    toSon: {
      require: true,
      type: String,
    },
  },
};
</script>

2.子传父 $emit( )

在父组件组件的标签上自定义一个事件，调用相应的方法

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>这是从子组件接收的值：{{ SonMsg }}</p>
    <Son :toSon="msg" @getSon="getSon"></Son>
  </div>
</template>

<script>
import Son from "./Son";
export default {
  components: {
    Son,
  },
  data() {
    return {
      msg: "父传子",
      SonMsg: "",
    };
  },
  methods: {
    getSon(val) {
      this.SonMsg = val;
    },
  },
};
</script>

在子组件的方法中通过this.$emit(‘事件名’)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是从父组件接收的值：{{ toSon }}</p>
    <button @click="$emit('getSon', msg)">点击这里将消息传递给父组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "子传父",
    };
  },
  props: ["toSon"],
};
</script>

3. 兄弟组件传值 EventBus

在main.js中，创建一个vue实例，并挂载到vue原型上

import Vue from 'vue'
import App from './App.vue'

const Bus = new Vue()
Vue.prototype.Bus = Bus
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

在传输数据的组件中，通过Bus.$emit(‘事件名’，‘参数’)来派发事件

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是从父组件接收的值：{{ toSon }}</p>
    <button @click="$emit('getSon', msg)">点击这里将消息传递给父组件</button>
    <button @click="toSon2">点击这里将消息传递给子组件2</button>
  </div>
</template>

<script>
export default {
  props: ["toSon"],
  data() {
    return {
      msg: "子传父",
      msg2: "兄弟传值",
    };
  },
  methods: {
    toSon2() {
      this.Bus.$emit("toBro", this.msg2);
    },
  },
};
</script>

在接收数据的组件中，通过Bus.$on(‘事件名’，(val)=>{})来接受数据

<template>
  <div class="son2">
    <h1>子组件2</h1>
    <p>这是从兄弟组件接收的值：{{ msg }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
    };
  },
  mounted() {
    this.Bus.$on("toBro", (val) => {
      this.msg = val;
    });
  },
};
</script>

4. vuex

vuex是一个专门为vue.js打造的状态管理模式，它相当于一个公共仓库，所有组件都使用里面的属性和方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    msg: 'vuex组件通信'
  },
  mutations: {},
  actions: {},
  getters: {},
  modules: {}
})

父组件

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>这是从store获取的值：{{ this.$store.state.msg }}</p>
    <Son></Son>
    <Son2></Son2>
  </div>
</template>

子组件

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是从store获取的值：{{ this.$store.state.msg }}</p>
  </div>
</template>

4. 本地存储

原理同vuex相似，利用 window.sessionStorage.setItem(“变量名”, 变量) 存储变量到本地存储，然后通过window.sessionStorage.getItem(“变量名”, 变量) 获取变量

5. Vue全局变量

原理是将属性值挂载到vue的原型上，然后通过 this.属性值 来访问变量

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false
Vue.prototype.msg = "Vue全局变量"

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

父组件

<template>
  <div class="father">
    <h1>父组件</h1>
    <p>这是Vue全局变量获取的值：{{ msg }}</p>
    <Son></Son>
    <Son2></Son2>
  </div>
</template>

子组件

<template>
  <div class="son">
    <h1>子组件</h1>
    <p>这是Vue全局变量获取的值：{{ msg }}</p>
  </div>
</template>

6. 路由传参

主要利用路由之间的跳转来传值
在路由中配置

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

传递变量的组件

<template>
  <div class="home">
    <button @click="toRouter">点击这里进行路由传参</button>
  </div>
</template>

<script>
export default {
  methods: {
    toRouter() {
      this.$router.push({ name: "About", params: { msg: "路由传值" } });
    },
  },
};
</script>

接收变量的组件

<template>
  <div class="about">
    <p>
      这是路由传递过来的值：<b>{{ this.$route.params.msg }}</b>
    </p>
  </div>
</template>