本文主要是介绍vue基础第四天复习，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.样式渗透

less使用::v-deep或者/deep/ 把样式作用到根标签之外的其他标签上,样式不起作用,用这个或者!important

2.组件传值:父向子传值

从一个vue组件给另一个vue组件传值

// 父向子语法:
// 子组件定义props来接收父组件传的值
// 数组形式
props:['title','arr']
// 对象形式:可以指定是否必传,传递的数据类型,默认值,自定义校验函数
// 接收的值是数组类型
props: {
   arr: {
    type:Array,
	required:true
  }
}
// 父组件通过属性来传递值
例子: :arr='list'
/*
*父向子传值的本质:在子组件标签上自定义属性,把值传给子组件
 子组件通过props接收
 注意:传递的数据是什么类型,接收的也是什么类型,想传什么类型的数据就传什么类型的数据
 注意2:当接收的属性名是两个单词用"-"连接时,在props里面要用小驼峰命名法
*/

3.单向数据流

单向数据流本质:父组件向子组件传值,子组件改变父组件传入的数据不通知父组件会导致数据的不一致性,并且props里面的值是只读的,不能赋值

分两种情况:

如果修改的是普通数据类型,重新赋值,相当于修改了地址

如果修改的是复杂数据类型,可以修改里面的值,不能修改地址,重新给数组或对象赋值

4.组件传值:子向父传值

本质:1.在子组件标签身上,自定义事件

2.在子组件内部($emit)触发,相当于子组件事件后面的函数调用了

5.todolist案例的思路

目标1:铺设代办任务
1.先把APP.vue里面的list数组传到todomain中
2.v-for循环展示数据
3.v-model绑定复选框选中状态
4.完成的动态样式绑定 任务完成才有这个样式
目标2:添加任务
1.给添加输入框绑定键盘事件--回车按键
2.v-model拿到输入框的值 新增的任务变量
3.子向父传值  list数组在父组件app.vue里面,传递一个新增的任务
4.父组件自定义事件的触发 把新增的任务添加到list数组里  id这里要判断数组长度是否为0的情况
5.清空input框的内容
目标3:删除任务 
1.给删除按钮绑定点击事件
2.通知父组件删除任务 this.$emit() 监听父组件的自定义事件 并传递id给父组件
3.父组件触发这个自定义事件
4.父组件接收子组件传递的id和父组件循环的id是否一样来找索引
5.根据索引删除数据
目标4:展示剩余数量值
1.这个数量值来源list数组的长度,父向子传值
2.子组件直接展示也行,计算属性展示也可以
定义计算属性
computed: {
  count() {
    return this.list.length
  }
}
目标5:点谁谁亮
1.定义变量isSel 用来存储all,yes,no
2.添加动态类名
3.点击切换isSel的值
4.父向子传值 传递切换数据的类型
目标6:展示对应的数据
1.定义中转变量
2.修改中转变量
3.通过修改的中转变量和list数组筛选显示数据
目标7:把数据存到本地(缓存)
1.侦听器:侦听list数组的变化,深度侦听
2.当数据变化,把数据存入本地,注意本地存储只能存字符串
3.默认从本地取出数据,取出的数据转为JSON格式的字符串,如果没有给个空数组
目标8:清除已完成
1.清除已完成---点击事件
2.子传父 子组件监听清除事件$emit()
3.父组件执行清除事件
4.删除未完成数组覆盖原list数组
目标9:全选影响小选,小选影响全选
计算属性:
computed: {
  // 拿到全选按钮的选中状态
  set(checked) {
	// 把全选按钮的选中状态赋值给小选框
    this.list.forEach(item=>item.isDone=checked)
  },
  get() {
	// 数组长度为0 全选按钮就不选中
    this.list.length!==0 && this.list.every(item=>item.isDone===true)
  }
}

6.跨组件传值(兄弟组件传值)

// 新建eventBus文件
// 在eventBus中导入vue对象
// 默认导出eventBus
// eventBus.$on('事件名',函数体)语法 执行自定义事件
// eventBus.$emit('事件名',值)监听自定义事件

这篇关于vue基础第四天复习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！