vue 父子组件间的传值

vue 中为了避免重复的代码，使页面更简洁，经常使用到组件，使用组件会牵扯到组件间的传值

常用的传值有: 父子间的传值（props），子父间的传值（$emit），兄弟间的传值（eventbus，vuex）

1. 父子间的传值，props

<!-- 父组件 -->
<template>
    <div>
        <child :name="name"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        name: 'parent',
        components: {
            child
        },
        data() {
            return {
                name: 'zhudying'
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        {{name}}
    </div>
</template>
<script>
export default {
    props:{
        name: {
            type: String,
            default: ()=> {
                return 'hello'
            }
        }
    },
    data() {
        return { }
    }
}
</script>

2. 子父间的传值，$emit

<!-- 子组件 -->
<template>
    <div>
        <div @click="send">{{name}}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
          name: 'zhudying'
       }
    },
    methods:{
        send(){
            this.$emit('send', name)
        }
    }
}
</script>

<!-- 父组件 -->
<template>
    <div>
        <child @send='getData'></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        name: 'parent',
        components: {
            child
        },
        data() {
            return {}
        },
        methods:{
            getData(data){
                console.log(data)
            }
       }
    }
</script>

3. 兄弟间的传值，eventbus

// 创建 bus.js 文件
// 所有EventBus事件都在这里添加
const event = {
  // 名称
  'ADD_NUMBUTER': 'ADD_NUMBUTER'
}

const EventBus = function (Vue) {
  const Bus = new Vue()

  Object.assign(Bus, event)
  Vue.prototype.$bus = Bus
}

export default EventBus

// main.js
import EventBus from './bus.js';
Vue.use(EventBus)

// 发送
<template>
    <div @click="sendMsg()"></div >
</template>
<script> 
export default {
  methods: {
    sendMsg() {
      this.$bus.$emit(this.$bus.ADD_NUMBUTER, { a: 'b' })
    }
  }
}
</script>

// 接收
<template>
  <p></p>
</template>

<script> 
export default {
  data(){
    return {}
  },
  mounted() {
    this.$bus.$on(this.$bus.ADD_NUMBUTER, this.showDetailHandler)
  },
  methods: {
    showDetailHandler (obj) {
        console.log(obj)
     }
  },
  // 每个bus.$on事件都要在所在组件的beforeDestroy里进行手动注销
  beforeDestroy () {
    this.$bus.$off(this.$bus.ADD_NUMBUTER, this.showDetailHandler)
  }
};
</script>

4. 兄弟间的传值，vuex

// store 的 index.js 下
// 引入vue及vuex
import vue from 'vue'
import vuex from 'vuex'

// 引入个模块
import performance from './modules/performance'

// 引入getters
import getters from './getters'

// 使用vuex
vue.use(vuex)

// 实例化store
const store = new vuex.store({
    // 注册模块
    modules：{
        performance
    },
    getters
})

export default store

// performance.js
export default {
    // 定义静态变量
    state: {
        row: {}
    },
    // 定义方法
    mutations: {
        // 通过UPDATE_ROW方法，修改state里的值
        UPDATE_ROW(state, data) {
            state.row = data
        }
    }
}

// getters.js 文件, store的计算属性
const getters = {
    // performance文件的state的计算属性
    row: state => state.performance.row
}
export default getters

// 引入vuex中的mapGetters
import { mapGetters } from 'vuex'

// 在computed里引入state定义的变量,...mapGetters表示，
// 使用对象展开运算符将 getters 混入 computed 对象中mapGetters里面的都是store.js里面的getters的方法名 
computed: {
    ...mapGetters([
        'row'
    ])
}
// 如果要修改row值
 this.$store.commit('UPDATE_ROW',{name：'zhangsan'});

5. props 传值，子组件修改父组件的值

<!-- 父组件 -->
<template>
    <div>
        <child :obj="obj"></child>
    </div>
</template>
<script>
    import child from './child'
    export default {
        name: 'parent',
        components: {
            child
        },
        data() {
            return {
                obj: {
                  name: 'zhudying'
                }
            }
        }
    }
</script>

<!-- 子组件 -->
<!-- 改变 inpu t中的 v-model 值时，父组件的 obj.name 会自动同步 -->
<template>
    <div>
      <input v-model='obj.name'></input>
    </div>
</template>
<script>
export default {
    props:{
        obj: {
            type: Object,
            default: ()=> {}
        }
    },
    data() {
        return { }
    }
}
</script>