day 04

默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

全局样式：默认组件中的样式会作用到全局
局部样式：可以给组件加上 scoped 属性，可以让样式只作用于当前组件

scoped 原理？

当前组件内标签都被添加 data-v-hash 值 的属性
css 选择器都被添加 [data-v-hash 值] 的属性选择器

最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到

<style scoped>
div {
  width: 244px;
  height: 306px;
}
</style>

data 是一个函数

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

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

data(){
	retun{
		count:100
	}
}

props 校验

作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

语法：

类型校验(可以简单写)
非空校验
默认值

自定义校验

props:{
校验的属性名：类型 // Number String Boolean ...
}

props:{
	校验的属性名：{
		type：类型， // Number String Boolean ...
		required：true，//是否必填
		default：默认值，// 默认值
		validator(){
			// 自定义校验逻辑
			return 是否通过校验
		}
	}
}

组件通信

组件通信，就是指 组件与组件 之间的数据传递。

两种组件关系分类和对应的组件通信方案

父与子关系 → props&$emit

非父子关系 → provide $ inject 或 eventbus

通用方案 → vuex

父子通信方案的核心流程

父传子 props

① 父中给添加属性传值 ② 子 Props 接受 ③ 使用

 <!-- 1.给组件标签，添加属性方式 赋值 -->
    <Son :title="myTitle"></Son>

// 2.通过props来接受
  props: ["title"],

<!-- 3.直接使用props的值 -->
    {{ title }}

子传父 $emit

① 子 $emit 发送消息 ② 父中给子添加消息监听 ③ 父中实现处理函数。

 ①子 $emit 发送消息
 <button @click="changeFn">修改title</button>
  methods: {
    changeFn() {
      this.$emit("changeTitle", "传智教育smm");
    },
  },
②父中给子添加消息监听
<Son :title="myTitle" @changeTitle="handleChange"></Son>
③父中实现处理函数。
methods: {
    handleChange(newTitle) {
      console.log(newTitle);
      this.myTitle = newTitle;
    },
  },

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

作用：非父子组件之间，进行简易消息传递。(复杂场景 →Vuex)

创建一个都能访问到的事件总线(空 Vue 实例) → utils/EventBus.js
1
2
3
import Vue from "vue";
const Bus = new Vue();
export default Bus;

A 组件(接收方)，监听 Bus 实例的事件

created() { Bus.$on("sendMsg", (msg) => { console.log(msg); this.msg =
msg; }); },

B 组件(发送方)，触发 Bus 实例的事件

// 放在点击事件或者其他事件里面，触发一下
Bus.$emit("sendMsg", "今天天气不错");

非父子通信-provide & inject

provide & inject 作用：跨层级共享数据。

父组件 provide 提供数据

export default {
  //向后代共享数据
  provide() {
    return {
      // 普通类型【非响应式】
      color: this.color,
      //  复杂类型【响应式】
      userInfo: this.userInfo,
    };
  },
 }

子/孙组件 inject 取值使用

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

.sync 修饰符

作用：可以实现 子组件 与 父组件数据 的双向绑定，简化代码

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

场景：封装弹框类的基础组件，visible 属性 true 显示 false 隐藏

本质：就是 :属性名 和 @update:属性名 合写

父组件（使用）：

<BaseDialog :visible.sync="isShow" />
//上面代码等于下面代码-----------------------
<BaseDialog :visible="isShow" @update:visible="isShow = $event" />

子组件（使用）：

props:{ visible:Boolean }, this.$emit('update:visible',false)

ref 和 $refs

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

特点：查找范围 → 当前组件内(更精确稳定)

获取 dom：

目标标签 - 添加 ref 属性

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

恰当时机，通过 this.$refs.xxx，获取目标标签
1
2
3
mounted(){
console.log(this.$refs.chartRef)
}

获取组件：
1. 目标标签 - 添加 ref 属性
  1
  <BaseForm ref='baseForm'></BaseForm>
2. 恰当时机，通过 this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法
  1
  this.$refs.baseForm.组件方法()

Vue 异步更新、$nextTick

$nextTick: 等 DOM 更新后，才会触发执行此方法里的函数体

语法：this.$nextTick(函数体)

this.$nextTick( ()=>{ this.$refs.inp.focus() })

HB's blog

Vue-day04