父子组件传递参数（props / $emit）

这个比较容易实现，我们只需要在组件上绑定自定义属性名就可以通过子组件中的props属性接受。看下面代码：

父组件代码parent.vue

<template><div class="parent"><button @click="btnClick">向子组件中发送data</button><h1 >子组件给我传过来的参数--> {{childrenData}}</h1><hr><children :content="content" @parentFn="getData"/></div></template><script>import children from "@/views/children.vue"export default {data(){return{content:"",childrenData:""}},components:{children},methods:{btnClick(){this.content = "hello children!"},getData(msg){this.childrenData = msg}}}

children.vue

<template><div class="children"><h2>我是孩子组件</h2><div>父组件给我传过来的数据是{{content }}</div><button @click="childrenFn">给父组件打招呼</button></div></template><script>export default {props: {content: {type: String,require: true,},},data(){return {message:"hello parent"}},methods: {childrenFn() {this.$emit("parentFn",this.message)},},};</script>

父传子：在parent组件中注册一个组件，然后父亲通过按钮发送content内容。绑定属性content

即子组件上:属性名，然后子组件内通过props去接收父组件传来的content。然后直接拿去渲染就可。平时父子传值用的还是比较多的。但是子组件如果想修改值，可以将props的值交给data里面的数据去处理。不建议修改props属性本身的值。

子传父：在子组件中通过this.$emit(“事件委托名”,payload)发送数据。父组件需通过绑定事件委托名，实现其传递数据。在这里我踩了个坑，绑定事件委托时，一定要在子组件本身上绑定。要不然，是监听不到子组件发送的委托事件的。

兄弟之间传递参数（$emit / $on 即eventBus）

cpn1.vue

<template><div><h1>我是大哥</h1><h1>二弟回我的话:{{message}}</h1><button @click="cpn1Click">向二弟说 二弟，今天我们去哪玩啊</button></div></template><script>import Bus from "./bus.js"export default {data(){return {message:""}},created(){Bus.$on("sendCpn1",(res)=>{this.message = res})},methods:{cpn1Click(){Bus.$emit("sendCpn2","二弟，今天我们去哪玩啊")}}}</script>

cpn2.vue

<template><div><h1>我是二弟</h1><h1>大哥给我说的话:{{message }}</h1><button @click="chickBtn">回大哥的话说 大哥,今天我们去三亚吧</button></div></template><script>import Bus from "./bus.js";export default {data() {return {message: "",};},created() {Bus.$on("sendCpn2", (msg) => {this.message = msg;});},methods: {chickBtn() {Bus.$emit("sendCpn1", "大哥,今天我们去三亚吧");},},};</script>

通过Bus将两个组件扭在一起，一个发送一个事件委托，一个去监听事件。知道这个Bus能够传递参数就可以。我反正不推荐用这个去写传递内容。因为自己在用的时候，觉得不是很好用。使用这个来回操作页面的话就会有很多监听。而且使用这种方式需要将Bus都导入到组件当中。当然，有人也会说可以直接挂在到Vue.propertotype上就可以实现全部的Bus。这个东西，一般有很多需要注意的地方。

操作dom传递参数（$parent / $root, $refs）

parent.vue

<template><div class="parent"><h1 >parent(爷爷 root) 内容:爷爷,过年的时候给你个压岁包</h1><cpn-1 ></cpn-1></div></template><script>import cpn1 from "@/views/cpn1.vue"export default {data(){return{content:"爷爷,过年的时候给你个压岁包",}},components:{cpn1}}</script>

cpn1.vue

<template><div><h1 >我是父亲(parent) 内容:在学校要好好学习啊</h1><button @click="seeChildrenStatus" >看看children的学习状态</button><children /></div></template><script>import children from "@/views/children.vue"export default {data(){return {message:"在学校要好好学习啊"}},components:{children},methods:{seeChildrenStatus(){alert(this.$children[0].studyStatus)}}}</script>

children.vue

<template><div class="children"><h2 ref ="act">我是children</h2><button @click="btnClick">回复爷爷</button><button @click="btnClick2">回复父亲</button><button @click="btnClick3"> 拿到自己的dom元素</button></div></template><script>export default {data(){return {message:"好的",studyStatus:"努力拼命的学习"}},methods: {btnClick() {console.log(this.$root);},btnClick2(){alert(this.$parent.message)},btnClick3(){alert(this.$refs.act.innerHTML);}},};</script>

这里面的$ root，$ parent都能够实现访问父组件的属性的方法，两者的区别在于，如果存在多级子组件，通过$parent访问得到的是它最近一级的父组件，通过 $root访问得到的是根组件。当我们用 $ children获取子组件时，这时候子组件是个数组。我们需要通过下标来进行相应的操作。

vuex状态管理

首先我们贴上官网 vuex官网

Vuex有五个核心概念

state、getter、mutations、actions、modules

state: vuex的基本数据，用来存储变量

state:{firstName:"junlebao",lastName:"mc"}// vue通过this.$store.state.firstName使用

geeter:及基本数据state派生的数据，相当于计算属性，具有返回值的方法

getter:{fullName:function(state){return state.firstName+state.lastName}}// vue通过this.$store.getters.fullName使用

mutaions:提交更新数据的方法,必须是同步的。每个mutation都有一个字符串的事件类型和一个回调函数

mutations:{setName:(state,name){state.name = name}}// vue通过this.$mit("setName",name)

action:Action提交mutation,不能绕过mutation直接去改变状态。action中可以包含异步操作。

actions: {increment (context) {mit('increment')}}// vue通过this.$store.dispatch("setName")

module: 模块化vuex,可以让每个模块都有自己的这五个属性。方便管理

异步：this. $ store.dispatch(“actions方法名”,value)

同步: this. $ mit(“mutations方法名”,value)