深入理解 Vue 组件

vue实现计数器功能

<counter ref=‘one’ @change=“handleChange”>

<counter ref=‘two’ @change=“handleChange”>

{{total}}

父子组件间传值

---

父组件向子组件传递数据

1. 父组件通过属性的形式向子组件传递数据。

2. 父组件可以随意的向子组件传递参数。

3. 但是子组件绝对不能去修改父组件传进来的参数（单向数据流）。

子组件向父组件传值

<counter :count=“3” @change=“handleChange”>

<counter :count=“2” @change=“handleChange”>

{{total}}

组件参数校验与非props特性

---

组件参数校验

组件参数校验是指：父组件向子组件传递参数的时候，子组件有权向父组件提出参数的形式和要求，并检验父组件传进的参数是否合乎要求。

非 Props 特性

Props 特性是指：当你的父组件使用子组件的时候通过属性向子组件传值的时候，恰好子组件里面声明了对父组件传递过来的属性的接收。

非Props 特性是指：父组件向子组件传递了一个属性，但是子组件并没有props接收的内容，也就是说，子组件并没有声明要接受父组件传递进来的属性。

非Props 特性特点一：如果子组件没人接收父组件传进的属性，则子组件不能使用父组件传进的值。

非Props 特性特点二：DOM中会保留父组件传递给子组件的属性标识

给组件绑定原生事件

---

很简单，在绑定事件的click后面加一个修饰符就行。

修饰符为 .native

<child @click.native=“handleClick”>

　

非父子组件间的传值

---

情景分析

我们可以把一个网页拆分成很多个部分，每个部分就是我们代码中是我一个组件，如下面的一张图：

如果 1  2 层需要进行传值，则为父子组件之间的传值，通信方式在之前的内容讲到过。

如果 1  3 层进行传值，则为非父子组件间的传值，应该怎么办呢？

第一中方式：和父子组件间传值一样，一层一层的传递，第一层传给第二层，第二层在传给第三层，反之亦然。但是这种传值方式显然不方便太繁琐。

加入 3  3 层进行的非父子组件传值，又会是怎样的处理方法呢？

这种情况显然更加不适合层层传值，即第三层传给第二层，第二层传给第一层，第一层传给第二层，第二层传给第三层，累死了！代码变得非常的复杂。

非父子组件传值解决方法

第一种方法，我们可以使用 VUE 官方提供的一个数据层的框架，名字叫做 VUEX 来解决，但是使用有难度。

第二种方法，使用 发布订阅模式 来解决非父子组件的传值问题，在vue中叫做 总线机制 。

使用总线机制解决非父子组件传值问题

VUE 中的插槽 - slot

---

父组件通过传值的方式向子组件添加标签

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

添加标签**

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

[外链图片转存中…(img-Q8PV7K7d-1714728975425)]