VUE组件通信

1.props传参

props让组件接收外部传过来的数据
传递数据

<Demo name="xxx" :age="18"/>

这里age前加:，通过v-bind使得里面的18是数字

接收数据
第一种方式（只接收）props:[‘name’, ‘age’]
第二种方式（限制类型）props:{name:String, age:Number}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中，然后去修改data中的数据

例子
父组件

<template>
  <div>
    <Mystu  name='张三' :age="18" />
  </div>
</template>

<script>
import Mystu from './Mystu.vue'
export default {
    name:"Myschool",
    data(){
      return{
      }
    },
    components:{Mystu}
}
</script>

<style>
</style>

子组件

<template>
	<div>
		<div>{{name}}</div>
		<div>{{age}}</div>
	</div>
</template>

<script>
	export default {
		name: 'Mystu',
		props:{name:String,age: Number},
		date(){
			return{
				
			}
		}
		}
</script>

<style>
</style>

适用场景：父组件传递数据给子组件
子组件设置props属性，定义接收父组件传递过来的参数
父组件在使用子组件标签中通过字面量来传递值

$emit 触发自定义事件

适用场景：子组件传递数据给父组件
子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值
父组件绑定监听器获取到子组件传递过来的参数

父组件

<template>
  <div>
    <Mystu v-on:atname="demo" />
    <p>{{name}}</p>
  </div>
</template>

<script>
import Mystu from './Mystu.vue'
export default {
    name:"Myschool",
    data(){
      return{
       name:""
      }
    },
    methods:{
      demo(name){
        console.log('demo被调用了',name)
        this.name=name
      }
    },
    components:{Mystu}
}
</script>

<style>
</style>

子组件

<template>
	<div>
		<button @click="sendname">触发</button>
	</div>
</template>

<script>
	export default {
		name: 'Mystu',
		
		data(){
			return{
				name:"张三"
			}
		},
		methods:{
			sendname(){
				this.$emit('atname',this.name)
			}
		}
		}
</script>

<style>
</style>

全局事件总线

一种可以在任意组件间通信的方式，本质上就是一个对象，它必须满足以下条件
1.所有的组件对象都必须能看见他
2.这个对象必须能够使用 $on $emit $off方法去绑定、触发和解绑事件

main.js

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

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate(){
    Vue.prototype.$bus=this// 安装全局事件总线
  }
}).$mount('#app')

父组件

<template>
  <div>
    <Mystu  />
    <p>{{name}}</p>
  </div>
</template>

<script>
import Mystu from './Mystu.vue'
export default {
    name:"Myschool",
    data(){
      return{
       name:""
      }
    },
    methods:{
      
    },
    mounted(){
			this.$bus.$on("atname1",(data)=>{
				console.log("我是父组件，我收到了数据",data)
        this.name=data
			})
		},
		beforeDestroy(){
      this.$bus.$off("atname")
    },
    components:{Mystu}
}
</script>

<style>
</style>

子组件

<template>
	<div>
		<button @click="sendname">触发</button>
	</div>
</template>

<script>
	export default {
		name: 'Mystu',
		
		data(){
			return{
				name:"张三"
			}
		},
		methods:{
			sendname(){
				this.$bus.$emit('atname1',this.name)
			}
		},
		
		}
</script>

<style>
</style>

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex中一共有五个状态 State Getter Mutation Action Module

State
提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

Modules
当遇见大型项目时，数据量大，store就会显得很臃肿
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

Vuex的基本使用
1初始化数据state，配置actions、mutations，操作文件store.js
2组件中读取vuex中的数据$store.state.数据3组件中修改vuex中的数据$store.dispatch(‘action中的方法名’,数据)
或$store.commit(‘mutations中的方法名’,数据)
若没有网络请求或其他业务逻辑，组件中也可越过actions，即不写dispatch，直接编写commit