vue组件传值

1. 依赖注入 需要有关系的界面， 向下传递， 相比于props， 可以多级传递， 即爷孙（不仅，多级，大于等于1级）
   顶级页面

	provide() {
	    return {
	      data ： 1，
	    };
	  },

子级页面

inject: ['data '],

2.无联系组件，eventbus
创建eventBus.js

import Vue from 'vue'
export const EventBus = new Vue()

怎么使用， 假如A组件向B组件发消息

<!-- A.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
import { EventBus } from "../eventBus.js";
export default {
  methods: {
    sendMsg() {
      EventBus.$emit("aMsg", '来自A页面的消息');
    }
  }
}; 
</script>

<!-- b.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
import { 
  EventBus 
} from "../event-bus.js";
export default {
  data(){
    return {
      msg: ''
    }
  },
  mounted() {
    EventBus.$on("aMsg", (msg) => {
      // A发送来的消息
      this.msg = msg;
    });
  }
};
</script>

即$emit,$on发送接受， 与socket一样哈，不过却与定时器一样，需要及时销毁
EventBus.$off()移除所有EventBus.$off(‘aMsg’) 移除指定
至于全局的事件总线，何不用vuex

3. 父传子

<!-- 父.vue -->
<template>
    <button :msg='msg'>-</button>
</template>

<script> 
export default {
data(){
    return {
      msg: '父亲的数据'
    }
  },
}; 
</script>

<!-- 子.vue -->
<template>
  <p>{{msg}}</p>
</template>

<script> 
export default {
	props: [msg]
};
</script>

4.子传父

<!-- 子.vue -->
<template>
    <button @click="sendMsg()">-</button>
</template>

<script> 
export default {
  methods: {
    sendMsg() {
      this.$emit("childClick", '来自子页面的消息');
    }
  }
}; 
</script>

<!-- 父.vue -->
<template>
  <Child @getMessage="childClick"></Child>
</template>

<script> 
import Child from xxx
export default {
	components:{
		Child
	}
	methods:{
		getMessage(val){
			console.log(val) //来自子页面的消息
};
</script>

5. 通过路由， 需有联系
   this.$router.push({ name: 'news', query: { userId: 123 }});
   跳转的路由页面
   javascript this.$route.query.userId
   6.vuex
   state：存放状态
   getters：state的计算属性
   mutations：修改state状态
   actions： 异步操作在action提交给mutations
   modules：模块化管理器

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)

const state = {
    text: 'text',
    message:"message"
}

const mutations = {
    changeText(state, str){
        state.text= str;
    },
    changeMessage(state, str){
        state.message= str;
    }

}

const actions = {
	toChangeText(context, message) {
		setTimeout(function () {
	  	context.commit("changeText", message);
	   }, 2000)
	 }
}

export default store;

组件内使用
同步 this.$store.commit{(}^{\prime }changeTex{t}^{\prime }{,}^{\prime }修改vuex的{值}^{\prime });异步this.$store.dispatch(‘toChangeText’, ‘哈哈哈’);

7.隔代传值之 $attrs $listeners
爷爷组件

<template>
  <div class="home">
    <HelloWorld :name="name" :age="age" :sex="sex" @change='change'/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data() {
    return {
      name: '周润发',
      age: '99',
      sex: '男',
    }
  },
  methods: {
    change(name, age) {
      this.name = name;
      this.age = age;
    }
  }
}
</script>

儿子组件

<template>
  <div class="hello">
    <h1>{{ name }}</h1>
    <next-child v-bind='$attrs' v-on='$listeners'></next-child>
  </div>
</template>

<script>
import nextChild from './nextChild.vue';
export default {
  name: 'HelloWorld',
  props: {
    name: String
  },
  components:{
    nextChild,
  },
  mounted() {
    console.log(this.$attes);
  },
}
</script>

孙子组件

<template >
    <div>
        孙子组件
        姓名：{{$attrs.name}}
        年龄: {{$attrs.age}}
        性别: {{$attrs.sex}}
         <button @click='handleClick'>改变</button>
    </div>
</template>
<script>
export default {
  methods: {
    handleClick(){
      this.$listeners.change("马冬梅", '11');
    }
  },
  mounted() {
    console.log(this.$attrs);
  },
}
</script>

最终页面
![在这里插入图片描述](https://img-blog.csdnimg.cn/412f7a276f7546049738ea86c47fb10b.png

会发现， 在孙子组件中name这个变量没了，是因为在儿子组件props中拿了(在孙子组件拿也一样)，$attrs的值是传递过程中， 除去props的值， 当点击改变，孙子直接触发了爷爷的change事件， 没经过父亲

inheritAttrs的属性解释：如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。
孙子组件加上inheritAttrs: false,

去掉