Vue组件04

1.scoped解决样式冲突

默认写在组件中的样式会全局生效，会造成多个组件之间的样式冲突可以给组件加上scoped属性，可以让样式只作用于当前组件。

2.scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性

2. css选择器都被添加 [data-v-hash值] 的属性选择器

3.data

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

4.组件通信

组件间的数据传递。

组件的数据独立，想用其他组件的数据----->组件通信

组件关系：

父子关系，非父子关系

父子关系：props 和$emit

非父子关系：provide&inject；eventbus

通用解决方案：Vuex（复杂场景）

父子通信流程：

1. 父组件通过 props 将数据传递给子组件

2. 子组件利用 $emit 通知父组件修改更新

5.props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

• data 的数据是自己的 → 随便改

• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

 6.非父子通信-event bus事件总线

用于非父子组件间，进行简易消息传递

1.创建一个都能访问的事件总线

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2.A组件（接受方），监听Bus的 $on事件

created () {
  Bus.$on('sendMsg', (msg) => {
    this.msg = msg
  })
}

3.B组件（发送方），触发Bus的$emit事件

Bus.$emit('sendMsg', '这是一个消息')

7.provide&inject跨层级共享数据

1.父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2.子/孙组件 inject获取数据

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

8.v-model

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template>
  <div id="app" >
    <input v-model="msg" type="text">

    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>

9..sync修饰符

实现子组件于父组件数据的双向绑定，简化代码

特点：prop属性名可以自定义，固定为value

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog 
  :visible="isShow" 
  @update:visible="isShow = $event" 
/>

10.ref和$refs

利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例

查找范围：当前组件内

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {
  console.log(this.$refs.chartRef)
}