vue组件传值详解

vue组件传值面试常问

1.父子传值： 父传子： 在父组件的子组件标签上通过v-bind绑定要传递的数据，然后在子组件内部通过props接收。

// 父组件 <select-list :dataList="dataArr" @parentReceive="changeVal"/> // 子组件 props: ['dataList']

子传父： 在子组件中定义一个方法，然后在方法里面通过this.$emit进 行 传 递 ( emit进行传递(emit进行传递(emit有两个参数(自定义事件名称，要传递的数据))。

// select-list组件 - 子组件 selectVal (val) { // 第一步 this.$emit('parentReceive', val) // 第一个参数：自定义事件名称；第二个参数要传递的数据 }

在父组件的子组件标签上通过@自定义事件名称监听，然后通过回调函数去处理响应的逻辑：

// 父组件 <template> <select-list :dataList="dataArr" @parentReceive="changeVal"/> </template> <script> changeVal (val) { console.log(`我是子组件传递过来的数据${val}`) } </script>

2.兄弟传值，其实说白了也可以用父子传值实现，道理都一样的。 3.中央通信(bus)也叫跨组件通信。 在要传递数据的组件通过$emit(自定义事件名称，要传递的数据)：

// select - list import bus from '../../main' selectVal (val) { bus.$emit('reveive', val) }

在目标组件通过on进 行 监 听 接 收 on进行监听接收on进行监听接收on(‘自定义事件名称’, 回调函数)：

// select - input import bus from '../../main' bus.$on('reveive', val => { console.log(val) this.value = val })

$emit 和 $on都要挂载到Vue空实例上，而这个空实例要全局使用因此需要在main.js创建：

// main.js let bus = new Vue() export default bus

4.vuex（杀手锏） vuex可以实现多组件的状态管理，多个组件之间可以数据共享。 vuex有5个核心，其中state和mutation是必须的，其他的可以按需求添加。 （1）state 负责状态管理，类似于vue中的data，用于初始化数据。 （2）mutation 唯一能够操作state的数据，通过commit触发。 （3）action 用于处理异步操作，通过dispatch触发，不能直接修改state的数据，首先要在组件中通过dispatch触发action，然后在action函数内部通过commit触发mutation，然后就可以通过mutation来修改state的数据。 （4）getter vue中的计算属性，相当于vue中的computed，依赖于state的状态值，状态值一旦改变，getter就会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter。 （5）module 主要就是模块化管理。