1. 组件通信
父子组件通信
-
父到子（Props）
：父组件通过
向子组件传递数据。子组件通过声明
来接收。
javascript
-
子到父（Events）
：子组件通过
向父组件发送事件和数据，父组件监听这些事件。
javascript
父组件监听
事件：
html
父组件中处理事件：
javascript
爷孙组件通信
-
爷爷到孙子（Provide / Inject）
：爷爷组件使用
提供数据，孙子组件使用
注入数据。
javascript
孙子组件注入数据：
javascript
使用 进行双向绑定
-
自定义组件的
：类似于父子组件通信，
可以用于自定义组件，以实现双向绑定。
javascript
父组件使用
html
在这里，
是父组件中的数据，
会自动使用
事件和
prop 来实现双向绑定。
2.插槽 slot /
2.1默认插槽
默认插槽是未指定名称的插槽，子组件中使用 标签来定义，默认情况下，所有未被具名插槽匹配的内容都会被分发到默认插槽。
子组件（ChildComponent.vue）:
父组件（ParentComponent.vue）:
2.2具名插槽
具名插槽允许你定义多个插槽，每个插槽都有一个名字。在子组件中，使用 标签的 属性来定义具名插槽。
子组件（ChildComponent.vue）:
父组件（ParentComponent.vue）:
Vue 3 引入了 符号作为 的缩写，使得具名插槽的写法更加简洁。
2.3作用域插槽
作用域插槽允许子组件将数据作为插槽的一部分传递回父组件。在子组件中，使用 指令来定义作用域插槽。
子组件（ChildComponent.vue）:
父组件（ParentComponent.vue）:
使用 符号简化作用域插槽的写法：
3.v:bind 的同名简写
- :id=id 可以写成 :id
4.前端Vue异常
- 信息、警告(可能版本问题等,根错误不同)
5.VUE声明响应式数据
- 使用ref( )就行，
- reactive( ) 只能声明引用数据类型
6.计算属性：computed（就是有依赖缓存）
使用场景：(常用的就是get函数，set函数不太常用)
- 需要的数据JS中没有
- 可以通过现有的数据通过操作得到一个新数据
7.v-if 和 v-for 优先级
- vue2中 v-if > v-for
- vue3中 v-if < v-for
8.element-ui 框架使用思路
直接‘快速开始’ 看需要安装什么对应的安装，比如使用到了图标就去安装图标，
然后使用组件，找到对应的组件以及对应的代码开始测试。
9.指令
v-bind
用于动态地绑定一个或多个属性，或一个组件 prop 到表达式。
v-model
在表单控件元素上创建双向数据绑定。
v-for
用于基于源数据多次渲染一个元素或模板块。
v-if / v-else-if / v-else
条件性地渲染一块内容。
v-show
通过切换 CSS 属性 来条件性地渲染元素。
v-on
监听 DOM 事件，并在事件触发时执行表达式。
v-once
只渲染元素和组件一次，随后的重新渲染将不会更新。
v-cloak
与 CSS 结合使用，用于在 Vue 实例被创建之前保持原始的 HTML，避免闪烁。
v-text 和 v-html
- ：更新元素的文本内容。
- ：更新元素的 HTML 内容，需要小心使用以避免 XSS 攻击。
v-memo
对子树的响应性依赖进行跟踪，并仅在依赖发生变化时重新渲染。
自定义指令
除了内置指令，Vue 也允许你定义自己的指令。
javascript复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/bian-cheng-ri-ji/40304.html