Vue~组件传值

项目开发中经常出现父子组件之间的嵌套关系，同时父子组件或者不同之间之间会出现一些数据传输需求；如编辑品牌数据，需要在弹窗中完成品牌数据的编辑操作；弹窗做为子组件，需要页面组件/父组件将需要编辑的数据传输给子组件进行操作；所以组件之间的数据传递是Vue项目中非常重要的一种操作方式

1，父子组件传值

解决方案：自定义属性

操作语法：props选项，自定义属性定义和传递

① 声明一个通过自定义属性接受数据的子组件Child1.vue，需要注意~自定义属性接受并使用父组件传递的数据，但是不能直接修改父组件传递的变量数据，称这种规范为 单向数据流！

<template>
	<div>
        <p>来自父组件的数据：{{ mfp }}</p>
    </div>
</template>

<script>
export default {
    // 自定义属性，当前组件通过mfp，可以接受来自父组件的数据
    props: ['mfp']
}
</script>

② 父组件Home.vue中，操作子组件

<template>
	<div>
        <!-- 使用子组件 -->
        <Child1 :mfp="msgFromParent"/>
    </div>
</template>
<script>
	// 引入子组件
    import Child1 from './child/Child1.vue'
    
    export default {
        data() {
            return {
                msgFromParent: '父组件数据'
            }
        },
        components: {
            // 注册子组件
            Child1
        }
    }
</script>

2，子父组件传值

解决方案：自定义事件

操作语法：vm.$emit(自定义事件, 传递数据)

① 定义一个子组件，可以发送自定义事件，通过事件传递数据

<template>
	<div>
        <p>当前组件数据：{{ msgFromChild }}</p>
        <button @click="sendData">发送数据给父组件</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            msgFromChild: 'Child数据'
        }
    },
    methods: {
        sendData() {
            // 触发一个自定义事件
            this.$emit('devent', this.msgFromChild)
        }
    }
}
</script>

② 父组件中使用子组件，监听子组件的事件，接受子组件中传递的数据

<template>
	<div>
        <p>子组件的数据：{{ mfc }}</p>
        <Child1 @devent="getData"/>
    </div>
</template>

<script>
	// 引入子组件
    import Child1 from './child/Child1.vue'
    
    export default {
        data() {
            return {
                mfc: '等待接受数据'
            }
        },
        methods: {
            getData(dat) {
                // 事件中接受子组件传递的数据
                this.mfc = dat
            }
        },
        components: {
            Child1
        }
    }
</script>

3，组件之间传值

如果两个组件之间，父子嵌套关系比较复杂的情况下，通过父子/子父组件 传值的方式比较繁琐，我们可以通过自定义事件中心的方式完成数据的传递

① 创建一个事件中心

import Vue from "vue"

const vm = new Vue()
// 导出一个空白对象
export default vm

② 定义一个组件准备接受数据

<template>
	<div>
        <p>接受其他组件的数据：{{ mfo }}</p>
    </div>
</template>
<script>
// 导入事件中心
import vm from '../../utils/events'
export default {
    data() {
        return {
            mfo: '等待接受其他组件的数据'
        }
    },
    created() {
        // 事件中心监听其他组件是否发送了数据
        vm.$on('oevent', dat => {
            // 将数据保存起来
            this.mfo = dat
        })
    }
}
</script>

③ 其他组件通过事件中心发送数据

<template>
	<button @click="sendDataToOther">
        发送数据给其他组件
    </button>
</template>

<script>
import vm from '../../utils/events'
    
export default {
    data() {
        return {
            msgFromChild: 'Child1数据'
        }
    },
    methods: {
        sendDataToOther() {
            // 事件中心通过自定义事件 发送数据
            vm.$emit('oevent', this.msgFromChild)
        }
    }
}
</script>