为什么用组件:组件可以复用,每一个组件都是独立的,模板,数据,css样式互不影响
全局注册组件component:请勿滥用全局组件inx 因为 全局组件会造成组件名污染
vue中遵循是单向数据流,数据的流向是父到子,父组件的数据变化了,props中的数据就会立马的更新
props:父传子(只读属性):父组件需要在子组件身上通过自定义属性传值,子组件内部通过props接收值(props 校验)
父中子组件 v-bind(自定义属性)绑定属性样式,属性值就是父的数据传递给子组件
在子中定义一个 props来接收场地过来的属性名
接收的props上的所有的数据,都可以直接在子组件的模板上使用,也可以使用在选项中(记得带this)即:methods,watch,computed
eg:::
1.父组件传递 (也可以自定义属性传值 :xiaoming="")
2.子组件设置接收 props,直接使用
export default
// 1.使用props定义接收参数
props:["xiaoming","xiaohong"]
}
props验证:
{{fMsg}}
emits:子传父(监听事件):父组件需要在子组件身上绑定自定义事件,子组件内部通过$emit触发事件并传值(可以 emits 效验)
fufuf
子组件
zizi
{{fMsg}}
兄弟组件传值:
先实例化一个公共的通信对象(中央事件总裁)eventBus.js,
其中一个兄弟组件通过$emit去发送触发事件 ,
一个组件通过$on接收监听事件
vue3:中没有明确的兄弟组件传值的方案,可以使用状态提升
(找到这两个组件共同的父级组件,然后通过父与子之间的传值实现)
//utils文件夹下:eventBus.js
import {createApp} from 'vue'
// 实例化通信对象,导出
export default createApp()
跨组件传值:方式一:依赖注入:外层组件通过 provide 选项传值,内层组件通过inject接收值:
不推荐使用依赖注入:因为数据追踪比较困难,不知道是哪一个层级声明了这个或者不知道哪一层级或若干个层级使用了。如果数据在多个组件都需要使用到,可以使用 vueX 来进行状态管理。如果只是子组件想要使用父组件上的数据,可直接通过 props 来让父组件给子组件传值。
跨组件传值:方式二:vuex状态管理工具也可实现。单向数据流
一个vue文件 provide只能写一个(data同级),写多个只有最后一个生效,所以,其他方法,
ref
用于注册元素或子组件的引用。进行基本的页面dom操作
1.在标签的dom之上使用ref=“随便起个名字”
2.this.$refs.你的那个名字即可找到指定元素
放在标签上:获取的是所在标签的dom节点 。
找到我
放到组件上,获取子组件的方法属性。使用方法时记得方法要加()调用。不要重复打印
我是home
$parent:写子组件内可以获取父组件的方法属性,有就获取,没有则为 null
$root:写子组件内可以获取 根组件的方法属性,有就获取,没有就是它自己
在vue中 数据改变试图不变怎么解决?
数据变试图不会改变
{{obj.age}}
什么是透传属性? 透传属性指组件在使用的时候,作用在组件上的属性,会被向下流动,绑定到组件内的标签中。
透传:父组件传递数据给子组件时,子组件接收父组件传递的属性 $attrs
透传作用:::
- attribute继承:子继承父:eg:class,id,style,属性,事件等头可以透传到组件内的标签中。
- 对class和style合并
v-on监听继承
- 禁用透传属性是否继承属性: inheritAttrs: false
- 多根节点的继承:子组件使用props接收父组件传递的属性
keep-alive和include,exclude
activated deactivated
is:特殊Attribute用于绑定[动态组件]
//动态组件:包裹挂载点即可
//路由:包裹路由出口即可
//属性:如果 我把两个都写了 excloud的优先级大于incloude
include 你要缓存谁
exclude 你不想缓存谁
#### 钩子函数
activated:在进入到被kepp-alive管理的组件时候触发
deactivated:在离开被kepp-alive管理的组件时候触发
替代 `mounted`挂载后 和 `unmounted`销毁后。
aaaaaaaa
动画组件
name=" " 自定义动画类名前缀,没有就默认
mode="out-in" 设置动画顺序,in-out,out-in
一共有 6 个应用于进入与离开过渡效果的 CSS class
hello
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
如果在组件的开关标签中插入内容 默认是不显示的(组件是一个完整的独立的个体 如果没有特殊设置 那么没有办法向组件中插入内容) slot用来混合父组件与子组件自己的模板
默认插槽
具名插槽
一文详解Vue插槽slot的使用与案例展示,看完就彻底明白了_slot 案例_唯一的阿金的博客-CSDN博客目录一、插槽的含义二、插槽的三种使用方法1.默认插槽2.具名插槽3.作用域插槽4.版本变化插槽slot在实际的项目开发中是经常使用的,主要分为三大类:默认插槽、具名插槽和作用域插槽,也是比较容易上手的。一、插槽的含义插槽slot是写在子组件的代码中,供父组件使用的占位符。在代码中,大致写为如下的形式,后面会进行详细的写法介绍。
定义插件:export default { install(app){ } }
应用插件:app.use(插件) use方法在执行的时候会自动寻找插件的 install 方法并执行该方法,完成插件的应用
局部指令:通过directives: { 插件名:{ 钩子函数 } } 选项来定义,只能在当前组件中使用
指令的功能:取决指令钩子的钩子函数 created,mouted,updated......
eg: 当一个 input 元素被 Vue 插入到 DOM 中后,它会被自动聚焦
全局指令: 全局指令 v-指令名使用,通过app.directive( 'cals' { })方法来定义,可以在任何组件中使用,指令的功能:取决指令钩子的钩子函数 created,mouted,updated......
使用 v-自动以指令的名字
//a
export default{
install(app){
app.directive('focus',{
// 绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
el.focus(); //聚焦
},
})
}
}
// b
export default{
install(app){
app.directive('cal',{
// 绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
el.value = el.value * 10 + '没钱'
// 加钱
},
})
}
}
childa组件
哎哎哎啊
哎哎哎啊
{{ count }}
作用:抽离多个组件的公共代码(选项),避免代码冗余
使用 :混入的公共代码会出现在组件的选项位置
全局混入不建议,会造成全局污染,用下边的局部混入吧
import导入mixins路径,混入:data同级自动混入,可以直接使用mixins里的方法属性了
export default{
// 能写在这里的都是组件已知选项 watch filter directives components data
methods:{
saveIndex(i){
this.index = i
}
},
computed:{
calc(){
return 2**10
}
}
}
// 导入mixins
import mixins from './mixins/index';
// 应用混入
mixins: [mixins],
methods: {
// 这个可以省略了。
// saveIndex(i) {
// this.index = i
// }
},
$forceUpdate():让组件强制更新(极端更新不了情况,自己写错了)
$nextTick():可以让特定代码在组件的 下次更新周期到 之后再执行
methods:{
handleClick(){
this.count++,
// console.log(this.$refs.title.innerHTML);
this.$nextTick(()=>{
console.log(this.$refs.title.innerHTML);
})
}
},