Vue的组件传值常用的方式有哪几种

1 父子组件传参
定义

*父组件向子组件传值:*

在子组件标签上绑定自定义属性名，
eg
< child v-bind:MSG="‘from Parent msg’" >< /child>
值是父组件需要传递的数据；(from Parent msg 就是父组件要传的数据)
子组件内部通过props属性接收“自定义属性名 MSG”，内部通过接收的{{属性名}}显示。

<template>
  <div class="about">
    <div>
      <h1>这个是子组件页面</h1>
      <p>接收父组件的信息--- {{ MSG}} 显示信息 </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "ts是超集",
      mada: "duiuiiu",
    };
  },
  props: ["MSG"], // 接收父组件信息

2 子父组件传参

定义
子组件向父组件 :
在子组件标签上绑定自定义事件，
子组件内部通过
$emit
给该事件推送数据，
父组件内部通过 <函数参数> 接收。
事件便是方法，传参便是在方法里进行-----
子组件内部通过

this.$emit(‘绑定的自定义事件名’,this.数据)

<template>
  <div class="home">
    <div>
      <h1>父组件</h1>
      <!-- 引入子about组件 -->
      <About :fu="info1" :chu="massage"  @teepone="value" /> 
      //   在子组件标签上绑定自定义事件，
    </div>

  </div>

<script>
import About from "./About";
export default {
  components: {
    About
  },
  data() {
    return {
      info1: "",
      massage: "",
      
      //接收子组件信息
      oo: "",
      ff: "",
    };
  },

  methods: {
    // 接收子信息
    value(da) { //    父组件内部通过 <函数参数> 接收。
      this.ff = da;
    },
  },

  // mounted() {
  //   console.log('组件挂载完成')
  //   console.log(this.$el)
  //   console.log(this.$refs)
  //   console.log((this.$refs.nihao.style.display="none"))
  //   console.log((this.$el.querySelector("h1").style.color="red"))
  // },
};
</script>


子组件代码：
<template>
  <div class="about">
    <div>
      <h1>子组件</h1>
      <button @click="hui">回传到父--{{ mada }}</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mada: "传给父组件的信息",
    };
  },
  methods: {
    hui() { // 子组件内部通过 $emit 给该事件推送数据，
      this.$emit("teepone", this.mada);
    },
  },
};
</script>

3 路由传参:
params query

1、命名路由传参

this.$router.push({ name: 'user', params: { user: 'nickname' }}); 

//页面接受
this.$route.params

2、查询参数传参

this.$ router.push({path: '/user', query: {user: "nickname"}});

//页面接受
this.$route.query

二.非父子组件间传值

4、bus总线
原理上就是建⽴立⼀一个公共的js⽂文件，专⻔门⽤用来传递消息
//定义bus插件 在 util文件夹下定义bus.js

import Vue from 'vue';
let install = (vue) => {
    vue.prototype.bus = new Vue();
}
export default install;

1.1、用到bus总线的地方，兄弟组件传值(父子组件也可以使用bus总线，但他使用自身的this.$ emit 、this.$on,更方便，相当于bus总线的变种)

在main.js中引入bus，方便在全局使用:

1.2 在需要传递消息的地⽅方引⼊入

	import bus from './util/bus'
		methods: {
  		passMsg () {
    		bus.$emit('msg', 'i am from app')
		  }
		},

传递消息，在需要接受消息的地方使用bus.$on接受消息

mounted () {
    bus.$on('msg', (val) => {
      this.childMsg = val
    });

5 .$ sttrs/listeners 用于多级组件间传值的问题
解决多级组件间传值的问题
　　 $attr 将⽗父组件中不不包含props的属性传⼊入⼦子组件，通常配合 interitAttrs 选项
　　 组件A传递到组件C,使用组件B作为桥梁A-B-C

组件A

< template>
< div id="app">
	    < !-- this is app -->
	    < m-parent :msg="a" :msgb="b" :msgc="c"></m-parent>
	  < /div>
	< /template>
　　　 

组件B

<template>
  <div>
    <m-child  v-bind="$attrs"></m-child>
  </div>
</template>

组件C
注意：如果组件C中有props属性接受的对象的话，组件A传递的对象就会被自动过滤掉

props: {
  msg: {
    type: String,
    default: ''
  },
}
mounted () {
    console.log('attrs',this.$attrs)
  }

一起使用。
　　如果不不想在dom上出现属性，可设置interitAttrs: false
　$listeners监听⼦子组件中数据变化，传递给⽗父组件

3.vuex全局使用参数
//新建store.js

	import Vue from 'vue'
	import Vuex from 'vuex'
	 
Vue.use(Vuex)
 
export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
//main.js中引入，就可以全局使用state
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app');