Vue04

一、学习目标

1.组件的三大组成部分（结构/样式/逻辑）

2.组件通信

3.综合案例：小黑记事本（组件版）

4.进阶语法

二、scoped解决样式冲突

1.默认情况：

三、data必须是一个函数

1、data为什么要写成函数

2.代码演示

四、组件通信

1.什么是组件通信？

2.组件之间如何通信

3.组件关系的分类

4.组件通信的解决方案

5.父子通信流程

6.父向子通信代码示例

7.子向父通信代码示例

8.总结

五、什么是props

1.Props 定义

2.特点

3.代码演示

六、props校验

1.思考

2.作用

3.语法

4.代码演示

七、props校验完整写法

1.语法

2.代码实例

3.注意

八、props&data、单向数据流

1.props&data的共同点

2.区别

3.单向数据流：

4.代码演示

5.口诀

十六、v-model详解（57）

十九、.sync修饰符（58）

二十、ref和$refs

1.作用

2.特点：

3.语法

5.代码示例

6.获取组件实例

二十一、Vue异步更新 & $nextTick

3.问题

4.解决方案

一、学习目标

1.组件的三大组成部分（结构/样式/逻辑）

scoped解决样式冲突/data是一个函数

2.组件通信

组件通信语法
父传子
子传父
非父子通信（扩展）

3.综合案例：小黑记事本（组件版）

拆分组件
列表渲染
数据添加
数据删除
列表统计
清空
持久化

4.进阶语法

v-model原理
v-model应用于组件
sync修饰符
ref和$refs
$nextTick

二、scoped解决样式冲突

1.默认情况：

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

全局样式: 任何一个组件中都会受到此样式的影响

局部样式: 给组件的style标签加上scoped 属性,让样式只作用于当前组件

原理：

<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
/* 
  1.style中的样式 默认是作用到全局的
  2.加上scoped可以让样式变成局部样式

  组件都应该有独立的样式，推荐加scoped（原理）
  -----------------------------------------------------
  scoped原理：
  1.给当前组件模板中的所有元素，添加上一个自定义属性：data-v-hash值（例如：data-v-5f6a9d56）
    利用这个hash值可以区分开不同的组件，data-v-hash值相同说明是在同一个组件内，反之亦然
  2.css选择器后面会被自动处理，添加上了属性选择器（div[data-v-5f6a9d56]）
*/
div{
  border: 3px solid blue;
  margin: 30px;
}
</style>

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

三、data必须是一个函数

1、data为什么要写成函数

一个组件的 data 选项必须是一个函数，然后在通过return{}提供数据。

这样可以：保证每个组件实例，维护的都是独立的数据对象，每次创建新的组件实例时，就会执行一次data 函数，得到一个新的数据对象。

2.代码演示

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data() {
    console.log('函数执行了')
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount'
export default {
  components: {
    BaseCount,
  },
}
</script>

<style>
</style>

效果：

四、组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间进行数据传递

组件的数据是独立的，所以无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

思考：

组件之间有哪些关系？
对应的组件通信方案有哪几类？

3.组件关系的分类

直接包裹的父子关系
没有关联的非父子关系

4.组件通信的解决方案

5.父子通信流程

父组件通过 props 将数据传递给子组件
子组件利用 $emit 通知父组件修改更新

6.父向子通信代码示例

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

父向子传值步骤：

在子组件标签中使用props 传递数据（需要在属性名前添加“:”，表示这是一个动态属性）
子组件内部通过props属性来接收父组件传递过来的数据
模板中直接使用 props接收的值

7.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新数据

子向父传值步骤

子组件通过this.$emit() 向父组件发送消息通知
父组件对子组件发送的消息进行监听
提供处理函数，在函数的形参中获取传过来的参数

子组件：

<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是Son组件 {{ title }}
    <button @click="changeFn">修改title</button>
  </div>
</template>

<script>
export default {
  name: 'Son-Child',
  props: ['title'],
  methods: {
    changeFn() {
      // 子组件通过this.$emit(事件名，参数) 向父组件发送 消息通知
      this.$emit('changTitle','传智教育')
    },
  },
}
</script>

<style>
</style>

父组件：

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是APP组件
    <!-- 2.父组件对子组件的消息进行监听 -->
    <Son :title="myTitle" @changTitle="handleChange"></Son>
  </div>
</template>

<script>
import Son from './components/Son.vue'
export default {
  name: 'App',
  data() {
    return {
      myTitle: '学前端，就来黑马程序员',
    }
  },
  components: {
    Son,
  },
  methods: {
    // 3.提供处理函数，提供逻辑
    handleChange(newTitle) {  //现在在处理函数的形参中就可以拿到 '传智教育'
      this.myTitle = newTitle
    },
  },
}
</script>

<style>
</style>

8.总结

组件关系分类有哪两种
父子组件通信的流程是什么？
1. 父向子
2. 子向父

五、什么是props

1.Props 定义

其实就是：在组件上注册的自定义属性，用于向子组件传递数据

2.特点

可以传递 任意数量 的prop
可以传递 任意类型 的prop

3.代码演示

父组件App.vue

<template>
  <div class="app">
    <UserInfo
      :username="username"
      :age="age"
      :isSingle="isSingle"
      :car="car"
      :hobby="hobby"
    ></UserInfo>
  </div>
</template>

<script>
import UserInfo from './components/UserInfo.vue'
export default {
  data() {
    return {
      username: '小帅',
      age: 28,
      isSingle: true,
      car: {
        brand: '宝马',
      },
      hobby: ['篮球', '足球', '羽毛球'],
    }
  },
  components: {
    UserInfo,
  },
}
</script>

<style>
</style>

子组件UserInfo.vue

<template>
  <div class="userinfo">
    <h3>我是个人信息组件</h3>
    <div>姓名：{{username}}</div>
    <div>年龄：{{age}}</div>
    <div>是否单身：{{isSingle}}</div>
    <div>座驾：{{car.brand}}</div>
    <div>兴趣爱好：{{hobby.join('、')}}</div>
  </div>
</template>

<script>
export default {
  props:['username','age','isSingle','car','hobby']
}
</script>

<style>
.userinfo {
  width: 300px;
  border: 3px solid #000;
  padding: 20px;
}
.userinfo > div {
  margin: 20px 10px;
}
</style>

六、props校验

1.思考

组件的props不可以乱传

2.作用

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

3.语法

类型校验（此节将的是类型校验）
- 如下图，将原来子组件中用props属性，接收数据的写法改成对象，在对象里面写名值对
  - 校验的属性名是原来接收参数的属性名，值是类型要求
非空校验
默认值
自定义校验

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

BaseProgress.vue

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    w: Number,
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

七、props校验完整写法

1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 父组件是否必须传过来这个属性
    default: 父组件没传这个属性时的默认值, 
    validator (value) {    // 自定义校验逻辑：此方法的形参可以接收传过来的那个数据
      return 是否通过校验
    }
  }
},

2.代码实例

App.vue

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      required: true,
      default: 0,
      validator(val) {
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

八、props&data、单向数据流

1.props&data的共同点

都可以给组件提供数据

2.区别

data中的数据是自己的 → 随便改
prop 的数据是外部（父组件）的 → 子组件不能直接改，要遵循 单向数据流

3.单向数据流：

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

4.代码演示

App.vue

<template>
  <div class="app">
    <BaseCount :count="count" @changeCount="handleChange"></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
    return {
      count:100
    }
  },
  methods:{
    handleChange(newVal){
      // console.log(newVal);
      this.count = newVal
    }
  }
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="handleSub">-</button>
    <span>{{ count }}</span>
    <button @click="handleAdd">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
  // data () {
  //   return {
  //     count: 100,
  //   }
  // },
  // 2.外部传过来的数据 不能随便修改
  props: {
    count: {
      type: Number,
    },
  },
  methods: {
    handleSub() {
      this.$emit('changeCount', this.count - 1)
    },
    handleAdd() {
      this.$emit('changeCount', this.count + 1)
    },
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

5.口诀

谁的数据谁负责

十六、v-model详解（57）

十九、.sync修饰符（58）

二十、ref和$refs

1.作用

ref属性和 $refs 配合可以在当前组件内获取 dom 元素或组件实例

2.特点：

查找范围 → 当前组件内 (比document获取元素更精确稳定)

3.语法

1.给要获取的元素或组件实例，添加ref属性

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

2.然后在恰当时机（也就是挂载完成后），就可以通过 this.$refs.ref的属性值获取到目标元素：

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

5.代码示例

App.vue

<template>
  <div class="app">
    <div class="base-chart-box">
      这是一个捣乱的盒子
    </div>
    <BaseChart></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components:{
    BaseChart
  }
}
</script>

<style>
.base-chart-box {
  width: 300px;
  height: 200px;
}
</style>

BaseChart.vue

<template>
  <div class="base-chart-box" ref="baseChartBox">子组件</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    // document.querySelector 会查找项目中所有的元素
    // $refs只会在当前组件查找盒子
    // 过去的写法：var myChart = echarts.init(document.querySelector('.base-chart-box'))
    var myChart = echarts.init(this.$refs.baseChartBox)   //现在的写法
    // 绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    })
  },
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>

6.获取组件实例

获取到组件实例，就可以调用那个组件里面提供的方法了：

二十一、Vue异步更新 & $nextTick

Vue的异步更新：

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input ref="inp" type="text" v-model="editValue"/>
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="handleEdit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
   handleEdit(){
    // 1.显示输入框(vue是异步dom更新的，当this.isShowEdit为true的时候，其实dom还没有被真正的解析渲染出来)
    this.isShowEdit = true
    // 2. 让输入框获取焦点（所以在这里获取不到）
    this.$refs.inp.focus()
   }
  },
}
</script>

<style>
</style>

3.问题

"显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM的 (提升性能)

4.解决方案

$nextTick的作用：等 DOM更新后,才执行此方法里的函数体

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

this.$nextTick(() => {
  this.$refs.inp.focus()    //将刚刚获取元素焦点的操作写在this.$nextTick()的函数体中
})

注意：$nextTick 内的函数体一定是箭头函数，这样才能让函数内部的this指向Vue实例

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="handleEdit">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    handleEdit(){
      //1.显示输入框(异步dom更新)
      this.isShowEdit = true
      //2.让输入框获取焦点
      this.$nextTick(()=>{
        this.$refs.inp.focus()
      })
    }
  },
}
</script>

<style>
</style>