组件传参与Vuex

组件传参：

1.props：父传子

数据是单向流动，父组件传给子组件的数据只能是只读的

父：

<div class="box">
   <p>这是父组件</p>
   <SonCom :data="msg"></SonCom>
</div>

子：

props: {
    data: {
        type: String,
        default:"这是接收到的数据"
    }
}

2.$emit：子传父，子组件通过$emit发送事件名和事件值

 子：

this.$emit("input",this.count);

父：

<SonCom @input="r=$event"></SonCom>

3. $parent：引用父组件参数

 子：

<p @click="$parent.outNum++">访问父组件的outNum:{
   
   {$parent.outNum}}</p>

父：

<template>
  <div>
    <NavCom></NavCom>
  </div>
</template>

<script>
import NavCom from '@/components/NavCom.vue'
export default {
  components: { NavCom },
  data() {
    return {
      outNum: 5
    }
  }
}
</script>

4.$children $refs：引用子组件参数

 父：

<NavCom ref="mynav"></NavCom>
<button @click="$children[0].myColor='#ff0000'">红</button>
<button @click="$children[0].myColor='#00ff00'">绿</button>
<button @click="$refs.mynav.myColor='blue'">蓝</button>

子：

<template>
    <div>
        <p :style="{'backgroundColor':myColor}">{
   
   {$parent.outNum}}</p>
    </div>
</template>
<script>
export default {
    data() {
        return {
            myColor: "#f30",
        }
    },
</script>

5.事件bus传参（跨层级访问数据，非父子关系）

 6.provider 和inject依赖注入（跨层级访问，数据是只读的）

 Vuex:

是什么

在大型，特大型，vue项目中做数据同一管理的

在vuex中存储的数据，每个组件都可以引用到；vuex中的数据发生变化，引用改数据的组件会自动更新

什么数据可以存储在vuex里面

如果一个数据，需要在多个组件中重复使用，可以把数据存放在vuex的store中；如：用户数据，购物车数据

vuex文件（store/index.js）

state:

 

 getters:

 mutations:

 actions:

 modules: