0901-vue

前面webpack的配置也需要在回顾一下

vue-cli脚手架的创建

vue-clic工具它是由vue官方出品，便于大家可以快速的构建一个vue的工程项目，它是基于webpack来构建的，vue-cli对于Nodejs的版本有一定的要求，Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。目前最新的vue-cli版本为5.0.4
通过vue-cli命令来创建vue 的工程化项目

首先安装vue

npm i -g @vue/cli

安装完毕后可以通过vue --version检查是否安装成功
安装完毕后通过以下命令创建

• -n 可以跳过git的初始化
• -m 可以指定使用的包的管理工具

vue create myapp 

进入

手动选择配置

选择版本

选择css预处理器

这里选择那个都可以 选取配置文件

这里问我们是否保留预项目选择n

选择包的管理器，我们在这里选取npm

组件通信

父传子

• 父组件以属性的形式绑定值到子组件身上
• 子组件通过使用属性props接受(props是单向数据流(只读属性)):当父组件的属性变化时，将传导给子组件，但是反过来不会
  父给子传值

在vue中接受父组件通过自定义属性传过来的数据,通过配置props来接受
props它是单向数据源,不能在子组件中直接去修改它,应该通过父组件修改
props可是数组的方式来接受，也可以是对象的方式来接受传过来的数据，

• 数组的方式常用于自己定义组件给自己用 —此方式,一般用于你自己定义组件给自己所用 简写方式
• 对象的方式常用于自己定义组件个别人用，可以限制数据的类型 --封装的组件提供给别人使用,它可以限制属性的类型和默认

props是数组的方式进行传值

• 第一步我们首先给父组件的中引用的子组件上自定义一个属性，通过属性将父组件的值传个子组件
• 第二步我们需要在子组件中通过props进行接受父组件传过来的值，这个值可以是data数据源的数据，也可以是个函数
• 第三步我们可以通过模板语法直接引用接受的值或者函数
  
  在js中获取父组件穿过来的值直接通过this.attrtitle就可以获取父组件的title值

props使用对象的方式进行接受值

对象的方式常用于自己定义组件个别人用，可以限制数据的类型 --封装的组件提供给别人使用,它可以限制属性的类型和默认
通过对象的方式来接受父组件传过来的值，可以通过字段type来限制传进来值的类型，

在通过对象的方式来接受父组件传过来的值里面，有很一些属性，可以配置

• type可以限制接受父组件传过来值得类型，并且类型得首字母需要大写
• default 可以设置默认值，如果父组件没有传值，就显示默认值，直接给值 [基础类型] | 回调函数[基础类型和引用类型都可以，引用类型设置默认值必须是此方案
• validator: 验证可以设置限制，返回false发出警告，返回true则代表正确
  

子传父

子组件用$emit()定义自定义事件，$emit()第一个参数为 自定义的事件名称 第二个参数为需要传递的数据，
父组件用v-on(@)绑定子组件定义的自定义事件名称，监听子组件的事件，实现通信

子组件可以自己通过事件给父组件传过来得值进行修改，但是浏览器会报以下错误，所以我们要通过通知父组件来进行修改值

报错原因：props是单项数据流，不能再子组件中直接修改父组件传过来得值，应该通知父组件进行修改

我们有两种方式，我们可以通过给函数添加参数得方式和给父组件中得调用的子组件添加事件

给函数添加参数的方式

通过父组件给子组件传值的方式，将更改数值的函数传给子组件，子组件再进行传参调用。

给父组件中得调用的子组件添加事件
通过给当前的组件定义一个自定义的事情,完成子向父传值
通过this.$emit(参数1,参数2，....)给父组件传值参数1：自定义名称的事件，参数2以后，是子组件传过去的数据
这里只需两步就可以向父组件传值

事件总线（兄弟之间可以通过事件总线进行传值）

如果两个组件是亲兄弟时，我们可以通过状态提升(两兄弟将通信的值都传递给父组件–两个兄弟公用的数据进行提升到父亲的组件中)的方式进行通信

非亲兄弟之间的通信（事件总线）

传递数据方，通过一个事件触发bus.$emit(方法名，传递的数据)接收数据方，在生命周期函数中，通过bus.$on(方法名,(参数)=>{})来监听
销毁事件，在接受数据方，通过bus.$off(方法名)销毁之后无法监听数据
非父子组件或更多层级间组件间传值，在Vue中通过单独的事件中心来管理组件间的传值。
事件总线只能进行通知，不能进行数据的存储功能。
前提条件:必须先订阅后发布

事件总线------私有变量

const eventBus = new Vue()
Vue.prototype.$eventBus = eventBus

这里我们可以使用一个插件进行导入使用，可以使这个事件总线更加便捷，只要有订阅的地方就要销毁

以下使对事件总线的使用

最后我们还需要使用bus.$off(方法名)进行销毁，哪里进行了订阅，哪里就需要进行销毁，销毁我们一般在vue的钩子函数destroyed或者beforedestroy中进行销毁

ref

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

ref它可以实现组件通信，而且它还可以获取dom对象

ref可以用来获取dom对象

我们通过给标签元素添加ref属性，调用$refs可以获取到ref属性的dom元素

当前我们删除了一个元素，但是打印处来的结果还是还是显示3个元素，但是我们展开之后是2个。这就说明我们的数据的操作是同步的，但是我们的数据渲染是异步的
解决方法：因为数据获取是同步的，视图渲染是异步的，所以我们可以使数据的获取也变成异步的，这是时候我们可以使用$nextTick(回调函数)

vue中提供了一个方法$nextTick方法,这时我们可以把，数据获取也变成异步的

使用$nextTick()解决

使用后的结果

$nextTick的官方解释
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。简单说就是异步获取dom，此回调方法会在整个dom更新结束后调用

ref实现组件通信

如果ref绑定 在自定义组件上，就可以得到当前组件的实例对象

更改数据，通过$refs直接调用子组件中的方法进行修改

root/parent/children

root在vue3中已经没有了

$children获取子组件的元素
$parent获取父组件的元素
$root获取根组件的元素，只要执行this.$root就可以找到根组件元素

provide/inject

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。
这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

一般封装组件，给别人使用时我们会用到它，
如果你要是用当前组件中的数据或者方法，provide就需要写成函数返回一个对象的方式

provide在祖先组件中进行发布，其下面的子孙组件都可以获取到，除其子孙组件外都获取不到—并且使用inject在子孙组件中获取

传个子孙组件，父组件中data数据源或者方法的用法

动态获取，使用上述的方式并不能动态的 获取到数据的更改。
原因：上图的this.msg就获取了一次，然而当获取元素的方式改为函数的时候，每当视图更新的时候，函数就会触发，向父元素索要数据进行修改

inject也有对象的方式

inject:{
	title:{
	default: '默认值'      //如果传过来的是一个函数就可以通过函数获取 ()=>()=>’默认值‘
}

$attrs/$listeners

$attrs获取没有在props中定义的属性
$listeners获取父组件给子组件自定义事件

$attrs的使用

$listeners的使用