初识vue第三篇

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.特点：查找范围 → 当前组件内 (更精确稳定)