vue样式穿透和组件传值

vue样式穿透和组件传值

vue样式穿透（深度作用选择器）

问题产生原因：当前组件A引入一个其他组件B做应用，A组件由于scoped作用，本身的全部html标签都会包含一个 data-v-xxx 的属性名称，使得css样式达到私有效果。被使用的组件B由于某些原因，编译解析后各个html标签不会形成 data-v-xxx 的属性，这样在组件A中给组件B设置样式会导致无效

解决办法：
1、通过深度作用选择器/deep/ 给B组件的某些标签设置样式

.a /deep/ .b {
    /* ... */ }

a是组件A的选择器，b是组件B的选择器，它们会形成如下效果

.a[data-v-f3f3eg9] .b {
    /* ... */ }

这样.b的css样式就生效了

注意：
1、某些情况下>>>符号有可能无法正确解析，可以替换为别名 /deep/ 或 ::v-deep
2、深度作用选择器的左边必须是当前组件的css选择器，右边是子组件标签选择器

vue组件传值

一、兄弟（非父子）组件之间传值

实现步骤：
（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', '1000元保护费')
    }
  }
}

xxx 是接收数据组件给bus声明的方法，第二个参数是传递的实参数据

说明：

1、Vue实例可以调用$on()方法进行事件方法创建

实例.$on(名称,(形参，形参，形参……){
   })

参数根据需要，可以是一个或多个

2、Vue实例可以调用$emit()方法进行事件方法调用

实例.$emit(名称,实参，实参，实参……)

参数 与 $on的形参是一一对应的

注意：虽然各个兄弟组件针对bus.js都有做引入，系统在运行的时候只有一个bus对象，故大哥 给 bus绑定的事件方法，老二可以通过bus调用

**案例应用：**小弟给大哥传值（components里有first.vue和second.vue）

（1）src/bus.js代码：

// 快递员，负责兄弟组件之间传递数据
import Vue