持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第三天,点击查看活动详情

组件

什么是组件？
- 组件是可复用的 Vue 实例, 封装标签, 样式和JS代码
组件化：封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护

一个页面，可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的结构样式和行为(html, css和js)

组件的基础使用

每个组件都是一个独立的个体, 代码里体现为一个独立的.vue文件

哪部分标签复用, 就把哪部分封装到组件内
组件内data必须是一个函数, 独立作用域
组件内template只能有一个根标签

全局注册

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

在mian.js里面

// 目标: 全局注册 (一处定义到处使用)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel'
// 3. 全局 - 注册组件
/*
  语法: 
  Vue.component("组件名", 组件对象)
*/
Vue.component("PannelG", Pannel)

全局注册PannelG组件名后, 就可以当做标签在任意Vue文件中template里用单双标签都可以或者小写加-形式, 运行后, 会把这个自定义标签当做组件解析, 使用 组件里封装的标签替换到这个位置

局部注册

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }
}

任意vue文件中中引入, 注册, 使用

<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <!-- 4. 组件名当做标签使用 -->
    <!-- <组件名></组件名> -->
    <PannelG></PannelG>
    <PannelL></PannelL>
  </div>
</template>

<script>
// 目标: 局部注册 (用的多)
// 1. 创建组件 - 文件名.vue
// 2. 引入组件
import Pannel from './components/Pannel_1'
export default {
  // 3. 局部 - 注册组件
  /*
    语法: 
    components: {
      "组件名": 组件对象
    }
  */
  components: {
    PannelL: Pannel
  }
}
</script>

组件使用总结:

(创建)封装html+css+vue到独立的.vue文件中
(引入注册)组件文件 => 得到组件配置对象
(使用)当前页面当做标签使用

scoped作用

解决多个组件样式名相同, 冲突问题

<style scoped>

在style上加入scoped属性, 就会在此组件的标签上加上一个随机生成的data-v开头的属性
而且必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
style上加scoped, 组件内的样式只在当前vue组件生效

组件通信-父传子

步骤:

创建组件components/MyProduct.vue - 复制下面标签
组件内在props定义变量, 用于接收外部传入的值
App.vue中引入注册组件, 使用时, 传入具体数据给组件显示

components/MyProduct.vue - 准备标签

<template>
  <div class="my-product">
    <h3>标题: {{ title }}</h3>
    <p>价格: {{ price }}元</p>
    <p>{{ intro }}</p>
  </div>
</template>

<script>
export default {
  props: ['title', 'price', 'intro']
}
</script>

<style>
.my-product {
  width: 400px;
  padding: 20px;
  border: 2px solid #000;
  border-radius: 5px;
  margin: 10px;
}
</style>

App.vue中使用并传入数据

<template>
  <div>
    <!-- 
      目标: 父(App.vue) -> 子(MyProduct.vue) 分别传值进入
      需求: 每次组件显示不同的数据信息
      步骤(口诀):
        1. 子组件 - props - 变量 (准备接收)
        2. 父组件 - 传值进去
     -->
    <Product title="好吃的口水鸡" price="50" intro="开业大酬宾, 全场8折"></Product>
    <Product title="好可爱的可爱多" price="20" intro="老板不在家, 全场1折"></Product>
    <Product title="好贵的北京烤鸭" price="290" :intro="str"></Product>
  </div>
</template>

<script>
// 1. 创建组件 (.vue文件)
// 2. 引入组件
import Product from './components/MyProduct'
export default {
  data(){
    return {
      str: "好贵啊, 快来啊, 好吃"
    }
  },
  // 3. 注册组件
  components: {
    // Product: Product // key和value变量名同名 - 简写
    Product
  }
}
</script>

<style>

</style>

总结: 组件封装复用的标签和样式, 而具体数据要靠外面传入

单向数据流

在vue中需要遵循单向数据流原则

父组件的数据发生了改变，子组件会自动跟着变
子组件不能直接修改父组件传递过来的props props是只读的

父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新

组件通信-子传父

从子组件把值传出来给外面使用，那我怎么才能修改子组件接收到的值呢?

其实要影响父亲, 然后数据响应式来影响儿子们 语法:

父: @自定义事件名="父methods函数"
子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

总结: 父自定义事件和方法, 等待子组件触发事件给方法传值

备忘录demo

需求：

需求1: 把待办任务, 展示到页面TodoMain.vue组件上
需求2: 关联选中状态, 设置相关样式
需求3: 输入任务敲击回车, 新增待办任务
需求4: 点击任务后的x, 删除当前这条任务
需求5: 统计当前任务的条数
需求6: 点击底部切换，点谁谁有边框
需求7: 对应切换不同数据显示
需求8: 点击右下角链接标签, 清除已完成任务
需求9: 无论如何变化 – 都保证刷新后数据还在
需求10: 点击全选 – 小选框受到影响
需求11: 小选框都选中(手选) – 全选自动选中状态 思路分析：

添加功能

在 TodoHeader.vue 文件中使用 v-model对输入框进行双向绑定 v-model.trim="taskName"
在 TodoHeader.vue 文件中定义 taskName 的变量
在 TodoHeader.vue 文件中注册事件 @keydown.enter="addTask"
在 TodoHeader.vue 文件中定义函数 addTask
在 TodoHeader.vue 文件中 addTask 函数里面进行非空判断
在 TodoHeader.vue 文件中 addTask 函数中使用子向父传递数据 this.$emit('addTaskFn', this.taskName)
在 App.vue 文件中找到 <todo-header @addTaskFn="addTaskHandler">
在 App.vue 文件中定义 addTaskHandler 函数
在 App.vue 文件中 addTaskHandler 将任务名追加到数组中
在 TodoHeader.vue 文件中 addTask 函数中 this.taskName = '' 清空输入框的内容

删除任务

在 TodoMain.vue 文件中给 button 标签注册事件 @click="del(item.id)"
在 TodoMain.vue 文件中定义 del 的函数需求确认是否删除
在 TodoMain.vue 文件中子向父传递数据 this.$emit('delTask', id)
在 App.vue 文件中找到 <todo-main @delTask="delTaskHandler">
在 App.vue 文件中定义 delTaskHandler 函数
在 App.vue 文件中 delTaskHandler 函数里面通过 id 获取下标 findIndex 方法
在 App.vue 文件中 delTaskHandler 函数里面 splice()

底部统计

在 App.vue 文件中找到
在 TodoFooter.vue 文件中通过 props 来接收 props: ['list']
在 TodoFooter.vue 文件中对应的模板标签使用 {{ list.length }}

tab 的效果

在 TodoFooter.vue 文件中删除2个li 标签
在 TodoFooter.vue 文件中在 li 身上使用 v-for 进行循环将数组的元素通过插值表达式写入到 li 中 {{ item }}
6.3 在 TodoFooter.vue 文件中在 a 标签身上通过 :class="{selected: i === index}" 需要在 data 里面定义变量 i 的值为 0
在 TodoFooter.vue 文件中在 a 标签身上通事件绑定 @click="toggle(index)"
在 TodoFooter.vue 文件中定义 toggle 函数接收 index 变量将 index 的值赋值为 this.i = index

数据切换

在 TodoFooter.vue 文件中在 toggle 函数里面通过子向父将索引值传递给父组件 this.$emit('toggleTask', index)
在 App.vue 文件中找到 <todo-footer @toggleTask="toggleTaskHandler">
在 App.vue 文件中定义 toggleTaskHandler 函数
在App.vue 文件中定义计算属性 showList 通过需要在 App.vue 里面定义变量 i
在App.vue 文件中计算属性 showList 根据 this.i 的值进行判断如果是0 则直接将 list 返回如果是 1 从 list数组里面筛选出未完成的的数组如果是 2 已完成从 list数组里面筛选出完成的的数组
在 App.vue 文件中找到 <todo-main :list="showList"></todo-main> <todo-footer :list="showList"></todo-footer>

清空已完成

在 TodoFooter.vue 文件中找到清空已完成给其注册事件 @click="clear"
在 TodoFooter.vue 文件中定义函数 clear 函数体中通过子向父传递数据 this.$emit('clearTask')
在 App.vue 中找到 <todo-footer @clearTask="clearTaskHandler">
在 App.vue 中定义函数 clearTaskHandler 过滤出未完成覆盖 this.list 数组

数据缓存

在 App.vue 文件中使用 watch 对 list 数据进行侦听开启深度侦听将最新的数据存储到本地存储中一定转换为 json格式的字符串
在 App.vue 文件中取数据时先从本地存储中将数据取出来如果没有数据就需要给一个空的数组

全选影响小选

在 App.vue 文件将 list 数组通过父向子传递数据到子组件 <todo-header :list="list"></todo-header>
在 TodoHeader.vue 文件中通过 props 来接收父组件传递过来的数据 props: ['list']
在 TodoHeader.vue 文件中找到 checkbox 复选框通过 v-model="isAll" isAll 是一个计算属性
在 TodoHeader.vue 文件中定义 isAll 的计算属性我们需要用完整写法
在 TodoHeader.vue 文件中注意
1. 如果父组件传递的是引用类型子组件是可以修改父组件里面的数据的
2. 将小选框删除了上面的那个全选框不要选中
目录结构

App.vue代码

<template>
  <div class="todoapp">
    <todo-header @addTaskFn="addTaskHandler" :list="list"></todo-header>
    <!-- <todo-main :list="list" @delTask="delTaskHandler"></todo-main> -->
    <todo-main :list="showList" @delTask="delTaskHandler"></todo-main>
    <!-- <todo-footer :list="list" @toggleTask="toggleTaskHandler"></todo-footer> -->
    <todo-footer :list="showList" @toggleTask="toggleTaskHandler" @clearTask="clearTaskHandler"></todo-footer>
  </div>
</template>

<script>

import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
export default {
  components: { TodoHeader, TodoMain, TodoFooter },
  data() {
    return {
      list: JSON.parse(localStorage.getItem('todolist')) || [],
      i: 0
    }
  },
  methods: {
    addTaskHandler(val) {
      // console.log(val)
      this.list.push({
        id: this.list.length ? this.list[this.list.length-1].id + 1 : 100,
        name: val,
        isDone: false
      })
    },
    delTaskHandler(id) {
      const index = this.list.findIndex(item => item.id === id)
      this.list.splice(index, 1)
    },
    toggleTaskHandler(index) {
      this.i = index
    },
    clearTaskHandler() {
      // 过滤出 未完成 
     this.list = this.list.filter(item => !item.isDone)
    }
  },
  computed: {
    showList() {
      // 0 1 2  0 ---> 全部  1 ---> 未完成 2---> 已完成？
      if (this.i === 0) {
        // 全部的任务
        return this.list
      } else if (this.i === 1) {
        // 未完成的任务 数组里面的 元素的 isDone 属性值为 false 筛选 新的数组 
        return this.list.filter(item => !item.isDone)
      } else if (this.i === 2) {
        // 已完成
        return this.list.filter(item => item.isDone)
      }
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newVal) {
        // console.log(newVal)
        // 将最新的数据 存储到 本地存储中
        localStorage.setItem('todolist', JSON.stringify(newVal))
      }
    }
  }

}
</script>

<style>

</style>

TodoHeader.vue代码

<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll" >
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      v-model.trim="taskName"
      @keydown.enter="addTask"
    />
  </header>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      taskName: ''
    }
  },
  methods: {
    addTask() {
      // console.log(1)
      if (this.taskName.length === 0) return alert('请填写任务名')
      this.$emit('addTaskFn', this.taskName)
      this.taskName = ''
    }
  },
  computed: {
    isAll: {
      set(val) {
        // console.log(val)
        // 是不是有点 违背今天上午讲的 单向数据流？
        // 在 子组件里面 在 修改 父组件里面的数据？ 
        // 上午 我们通过 父---> 子 传递的是 基本数据类型  刚刚 数组？ 引用类型 
        this.list.forEach(item => item.isDone = val)
      },
      get() {
        // 小选影响全选 如果 list 数组里面的 所有的 isDone 属性都为 true 则 方法 true  否则有一个不是true 就返回false 
        // every
        // 如果this.list 里面的数据已经没有了 就 return FALSE
        if (this.list.length === 0) return false
        return this.list.every(item => item.isDone)
      }
    }
  }
}
</script>

TodoMain.vue代码

<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li :class="{completed: item.isDone }" v-for="item in list" :key="item.id">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="item.isDone" />
        <label>{{ item.name }}</label>
        <button class="destroy" @click="del(item.id)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  props: ['list'],
  methods: {
    del(id) {
      if (confirm('确认是否删除?')) {
        this.$emit('delTask', id)
      }
    }
  }
}
</script>

TodoFooter.vue代码

<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong> {{ list.length }} 值</strong></span>
    <ul class="filters">
      <li v-for="(item,index) in arr" :key="index">
        <a :class="{selected: index === i}" href="javascript:;" @click="toggle(index)" >{{ item }}</a>
      </li>
    </ul>
    <button class="clear-completed" @click="clear" >清除已完成</button>
  </footer>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
      arr: ['全部', '未完成', '已完成'],
      i: 0
    }
  },
  methods: {
    toggle(index) {
      // console.log(index)
      this.i = index
      this.$emit('toggleTask', index)
    },
    clear() {
      this.$emit('clearTask')
    }
  }

}
</script>

Vue 组件通信-备忘录demo

组件