VUE各个组件的传值

VUE各个组件的传值

父给子传值

父组件可以 引入、使用 子组件，从业务上看，该父组件有可能对子组件有个性化需求，为了体现组件的灵活多变，可以通过传值实现

语法：

父组件要在子组件标签上通过属性值方式传值

<子组件标签 name=value name=value name=value></子组件标签>

子组件接收并应用值，具体通过props接收

<!--在模板中应用传递来的数据-->
<input :style="{color:xx}">

<script>
  export default {
    // 通过props接收父传递过来的数据,注意各个名称需要使用单引号圈选
    // 具体有两种方式：
    props:['xx','xx','xx'],
    props:{
      xx:{
        type:类型限制
        default:默认值
      }
    }
  }
</script>

sync 应用

通过.sync优化父组件的相关操作

该方法实现 子组件修改父组件传递过来的数据

父组件：
<!-- 通过 【:yan.sync="co"】 就是对 如下内容-->
<!-- 【:yan="co" @update:yan="data=>{co=data}"】-->
<!-- 的封装-->
<com-button :yan.sync="co"  :se.sync="abc"></com-button>
子组件：
<button @click="$emit('update:yan','blue')">修改</button>

我们可以通过.sync设置，子组件可以修改父组件传递过来的具体数据信息

update是固定标志

子给父传递

步骤：

1. 父组件 向子组件 通过@符号定义一个事件，在本身内部methods中声明事件方法
2. 子组件 调用 父组件 传递过来的事件，并传递相关的数据
3. 父组件 通过事件方法参数获得子组件传递过来的数据并使用

父组件操作语法：

父组件通过**@符号**向子组件传递一个事件方法

<子组件 @func1="show"></子组件>
...
methods:{
	show(arg1,arg2){xxxx}
}

其中

​ func1为事件的名称，给子组件触发使用

​ show为该事件的执行函数，在父组件内部的methods中定义好

​ 在事件中可以通过形参(arg1、arg2)接收子组件传递过来的数据 并做近一步处理

子组件操作：

子组件中，使用this.$emit()调用 父组件中的方法

this.$emit('func1', 数据, 数据)

从第二个位置开始传递实参数据，其可以被父组件methods方法的形参所接受

$emit(名称，数据，数据……) 是组件调用自己方法的固定方式，第一个参数是被调用方法的名称，后续参数都是给方法传递的实参信息

兄弟之间传值

兄弟组件之间彼此没有联系，它们需要通过中间Vue实例对象bus(快递员)进行数据传递

实现步骤：

1. 定义模块 src/bus.js，内容就是导入Vue模块并导出一个Vue实例对象

   import Vue from 'vue'
   export default new Vue() 
   

2. 在各个兄弟组件中，导入 bus.js 模块

   import bus from '@/bus.js'
   

   虽然bus.js被各个组件都导入，但是系统中bus只是一个对象

3. 在接收数据的兄弟组件的 created 生命周期方法里(使得事件及时响应)，"大哥"的组件中声明

   使用 bus.$on(‘事件名称’, (接收的数据) => {}) 定义事件成员方法

   created(){
     // 定义事件,注意箭头函数应用
     bus.$on('xxx', data=>{
       console.log(data)
     })
   }
   

   xxx是事件方法的名称

   data是形参，待接收数据，并且可以定义多个

   如果$on内部要使用this，需要通过"箭头函数"声明方法

4. 在发送数据的兄弟组件中，使用 bus.$emit(‘事件名称’, 要发送的数据) 来向外发送数据

   <button @click="sendMsg">给大哥回话</button>
   export default {
     methods: {
       sendMsg(){
         // 触发 绑定的 事件，并向外传递参数
         bus.$emit('xxx', '要传递的数据')
       }
     }
   }
   

   xxx 是接收数据组件给bus声明的方法

第二个参数是传递的实参数据