组件通信方式大全

 1、父传子

父组件

<template>
  <div>
    <Sectond :indexList="indexList"></Sectond> //父亲传递给子组件的值
  </div>
</template>
<script>
import Sectond from "./Second";//为了父传子引入子组件
export default {
    data (){
         return {
           indexList:"我是父亲，这个值是给孩子的",
         }
  },
  components: {
    Sectond, //在此注册子组件，为了给子组件传值
      }
}
</script>

<style>

</style>

子组件

<template>
  <div>
     {{indexList}} //使用父亲传递过来的值
  </div>
</template>
<script>
export default {
    props:['indexList'],//接收父亲传过来的值
    data (){
         return {       
         }
  },
}
</script>

<style>

</style>

 2、子改父

子组件

<template>
  <div>
   <button type="button" @click="upFather">我是儿子，点我，修改父亲原值</button>
  </div>
</template>
<script>
export default {
    data (){
         return {
            childValue:"我是chird的数据"
         }
  }, 
  methods: {
    upFather(){
      this.$emit('childByValue',this.childValue)
      //点子组件的按钮，就是把这个函数发布在一个公共池子中，参数就是自己data中的数据，目的是把父亲的值改成自己data中的值）
    }
  },
  components: {
   
      }
}
</script>

<style>

</style>

父组件

<template>
  <div>
  <Third @childByValue="childByValue" ></Third>
//在这个子组件中一点按钮，就触发了这个函数，并且参数是子组件传递过来的，用来改父亲原来的值的
      {{name}} //我是父亲原来的值
  </div>
</template>

<script>
import Third from "./Third";//为了子改父引入
export default {
    data (){
         return {
           name:"我是父亲原值",//我是实现子改父亲的，父亲原来值
         }
  },
  methods: {
    childByValue(childValue){ //子组件中一点按钮，就触发了此函数，参数是子组件带过来的，赋值给父亲原来的值
      this.name=childValue;
      console.log(this.name); //此时的父亲的原值已经被改了
    }
  },
  components: {
    Third,
      }
}
</script>

<style>

</style>

 3、兄弟传值（跟子改父类似，也用$emit，但是不像它可以把子组件引入，所以我们用Bus,js）

最好在comonent中新建一个bus,js

// event-bus.js
import Vue from 'vue';  
export default new Vue(); 

或者在main.js中，初始化 EventBus

// main.js
Vue.prototype.$EventBus = new Vue()

----------------------------搭配以下用法
this.$bus.$emit("giveSon", this.word);

A兄弟组件

<template>
  <div>
   <button type="button" @click="elementByValue">点击修改兄弟</button>
  </div>
</template>

<script>
import Bus from "../components/bus.js"//引入Bus
export default {
    data (){
         return {
           elementValue:4 //A兄弟自己的值
         }
  },
  methods: {
    elementByValue(){ //点击是事件会把val这个函数发布在Bus中，且自己的值是参数带过去
       Bus.$emit("val",this.elementValue)
    }
  },
}
</script>

<style>

</style>

B兄弟组件

<template>
  <div>
      <span>{{name}}</span> //被改的兄弟原值
  </div>
</template>

<script>
import Bus from "../components/bus.js"
export default {
    data (){
         return {
           name:0, //被改的兄弟原值
         }
  },
  mounted() {
      var vm=this; //箭头函数中没有this,所以这样来获取this,进而让兄弟能修改自己的值
      Bus.$on("val",(res)=>{
          console.log(res);//兄弟传过来的值
          vm.name=res//把自己的值改成兄弟传递过来的值
      })
  },
}
</script>
<style>

</style>

4、vuex 

1、安装vuex --------npm i vuex@3

2、新建store文件夹，里边放index.js,代码如下

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

export default new Vuex.Store({
    state:{
        num:"我是store中的数据",  //别的组件都可以通过，this.$store.state.num获取到
    },
    mutations:{

    },
    actions:{

    },
    modules:{

    }
})

3、main.js引入，整体代码如下

import Vue from 'vue'
import App from './App'
import router from './router/index.js'
import store from "./store/index.js"  //引入vuex文件夹

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router, 
    store,  //注册vuex
    render: h => h(App)
}) 

4、在你用到的页面引入

<template>
   <div>
      {{$store.state.num}} //使用vuex中的数据，相当于一个简单的参数传递，在其他页面也可以用
   </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
}
</script>
<style>

</style>

 5、利用本地存储实现传值（window.localStorage.setItem）

给本地存值的组件

<template>
   <div>
      <button type="button" @click="saveValue">点击给你本地存值</button>
   </div>
</template>
<script>
export default {
    data() {
        return {
            
        }
    },
    methods: {
        saveValue(){
            window.localStorage.setItem("aaa","111")//此处是给本地存储的值，其他组件都可以拿到
        }
    },
}
</script>
<style>

</style>

获取本地值的组件

<template>
  <div>
  {{aaa}}     <!-- 显示从本地拿到的值 -->
  </div>
</template>

<script>
export default {
    data (){
         return {
           aaa:"",//存取我从本地存储中拿到的值
         }
  },
  created() {
   this.aaa=window.localStorage.getItem("aaa") //获取本地的值，展示出来
  },
 
}
</script>

<style>

</style>

 6、利用全局变量

在main.js中

Vue.prototype.$target="abc";

在你要用的页面

console.log（this.$target）

7、通过query传参

准备传参页面

this.$router.push(`home?${this.name}`)
//此处把this.name通过query传参，传递给了home页面


-------或者第二种方法query


this.$router.push({
    path : 'Six',   //此处可以通过path跳转，也可以通过name跳转 （name就是name:"/six）
    query : {
        id : 111,
        name : 'zhangsan'
    }
})

接收数据页面

this.$route.query.name; //使用路径中的参数

8、通过params传参数

准备传参页面

this.$router.push（{
  name:"Six",  //此处只可以通过name
  params：{
      id:"011,
      name:"zhangsan"
}
}）

接收数据页面

console.log（this.$router.params）;//打印你接收的params数据