1.组件的三大组成部分 (结构/样式/逻辑)
一.组件的样式冲突 scoped原理
a. 当前组件内标签都被添加 data-v-hash值 的属性
b. css选择器都被添加 [data-v-hash值] 的属性选择器
c.最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
二.data
1.一个组件的 data 选项必须是一个函数。→ 保证每个组件实例,维护独立的一份数据对象。
2.每次创建新的组件实例,都会新执行一次 data 函数,得到一个新对象。
data () {
return {
count: 100
}
}
2.组件通信
一.组件通信, 就是指 组件与组件 之间的数据传递。
a.组件的数据是独立的,无法直接访问其他组件的数据。
b.想用其他组件的数据 → 组件通信
二.父子通信流程图:
a. 父组件通过 props 将数据传递给子组件
b. 子组件利用 $emit 通知父组件修改更新
<template>
<div class="app" style="border: 3px solid #000; margin: 10px">
我是APP组件
<!-- 1.给组件标签,添加属性方式 赋值 -->
<Son></Son>
</div>
</template>
<script>
import Son from "./components/Son.vue"
export default {
name: "App",
components: {
Son,
},
data() {
return {
myTitle: "",
}
},
}
</script>
<style>
</style>
<template>
<div class="son" style="border:3px solid #000;margin:10px">
<!-- 3.直接使用props的值 -->
我是Son组件
</div>
</template>
<script>
export default {
name: 'Son-Child',
// 2.子组件通过内部props来接受
}
</script>
<style>
</style>
三.非父子通信 provide & inject
provide & inject 作用:跨层级共享数据。
a. 父组件 provide 提供数据
export default {
provide () {
return {
// 普通类型【非响应式】
color: this.color,
// 复杂类型【响应式】
userInfo: this.userInfo,
}
}
}
b. 子/孙组件 inject 取值使用
export default {
inject: ['color','userInfo'],
created () {
console.log(this.color, this.userInfo)
}
}
3.什么是 prop
a.Prop 定义:组件上 注册的一些 自定义属性
b.Prop 作用:向子组件传递数据
prop & data区别
data 的数据是自己的 → 随便改
prop 的数据是外部的 → 不能直接改,要遵循 单向数据流
v-model 原理
原理:v-model本质上是一个语法糖。例如应用在输入框上,就是 value属性 和 input事件 的合写。
作用:提供数据的双向绑定
① 数据变,视图跟着变 :value
② 视图变,数据跟着变 @input
<div id="app" >
<input v-model="msg" type="text">
<input :value="msg" @input="msg = $event.target.value" type="text">
</div>
.sync 修饰符
a.作用:可以实现 子组件 与 父组件数据 的 双向绑定,简化代码
b.特点:prop属性名,可以自定义,非固定为 value
c.场景:封装弹框类的基础组件, visible属性 true显示 false隐藏
ref 和 $refs
a.作用:利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例
b.特点:查找范围 → 当前组件内 (更精确稳定)