vue 组件化
发布于:2021-12-15 10:44:29 栏目:技术文档
vue 组件化
子组件与父组件互相传值
以下App.vue代表根组件index.html代表主入口文件
- 默认建在 components 文件夹内
- 文件名首字母大写
- APP.vue 是最上层的组件 而不是 index.html
- 如果需要导入的组件是匿名导出的,就在 App.vue 中使用
import MyBtn from './components/MyBtn'
导入 - 这里需要注意导入的时候没有 vue 后缀
- 然后加到 components 中
- 在上层组件使用时,使用
<MyBtn></MyBtn>
或<my-btn></my-btn>
两种形式都可以使用,但是一般是使用第二种形式 - style 中加入 scoped 意味着该 vue 中的样式只能在本文件中使用,但是一般加 scoped 会受到限制,不加的话冲突性又太强,因此这里可以加一个
lang='scss'
,在最外层的 div 加一个类,然后利用 scss 的特性用一个大的 class 样式将所有的子样式包裹 - 父组件给子组件传值
- 子组件里直接属性名=”值”直接传字符串
- 通过绑定值的方式
:data="msg"
来传变量 - 子组件里用 props 来接收参数
- props 里面的内容可以跟 data 里面的值一样直接插入,但是一般不建议把所有的内容都放到 props 里面,只有传过来的值才放进去
- props 里面可以是数组或者对象
- 如果是对象还可以进行重命名,并加一些限制
- 对象中的属性还是一个对象
- 可以定义传过来的类型 type,如 String、Array、Object
- type 后面跟的参数不加引号
- 如果一个组件里调用多次子组件,需要把需要的参数都传过来,如果不传就会出问题,解决这个问题可以使用 default 来给对应属性加一个缺省值,这样如果传参则使用传过来的参数,不传就默认使用缺省值
- 子组件给父组件传值
- 首先子组件需要传值的标签需要绑定一个事件,事件触发一个函数,函数可以传值
- 函数中使用
this.$emit()
来给父组件传值,里面有两个参数,第一个是声明的自定义事件名称,这个可以是任意名称,第二个参数是需要传的值 - 父组件中接收值的标签需要使用子组件自定义的事件,事件触发一个函数,函数内可以接收子组件传过来的参数
- 子组件中可以调用,但是无法改变父组件传过来的值(
this.btn
这种形式),可以定义一个变量,将值赋给该变量,去改变该变量的值 - 父组件可以改变子组件传过来的参数的值
子组件与父组件之间互相通信
- 如子组件访问父组件的方法
this.$parent.myFun()
,标签跟函数内都可访问,多级访问可以使用多次$parent,如孙组件访问就是this.$parent.$parent.myFun()
- 如果能确认访问的组件方法是根节点的,还可以直接使用$root来访问,即
this.$root.myFun()
3.父组件访问子组件的方法,首先需要给子组件使用ref=''
来给子组件起个别名 - 然后使用
this.$refs.aaa.btn()
aaa 是子组件起的别名,btn()是子组件中的方法,来进行访问 - 需要着重注意一点在初始加载的时候,子组件的这些方法是还没有被渲染的,无法访问,可以通过事件或者其他异步操作使其渲染后再访问
插槽
- 插槽使用 slot 标签进行绑定
- 插槽也区分默认插槽(缺省插槽)跟具名插槽
- 具名插槽就是 slot 标签加一个 name 属性,缺省插槽则不加,缺省插槽有且只能有一个
- 插槽标签 slot 内,可以填入默认值,这样当传值时则使用传过来的值,不传值时使用默认值
- 父组件使用插槽,使用子组件标签内加 template 来使用,如果是缺省的,则内容直接加在
<template v-slot:default></template>
里面,比如子组件叫 card,缺省的插入就是<card><template v-slot:default>msg</template></card>
,msg 代表插入的内容 - 如果是具名插槽,如果 name 设置的值为 one,则使用
<card><template v-slot:one>msg</template></card>
来插入 <template v-slot:one>
有个语法糖是<template #one>
- 父组件拿取子组件插槽的数据
- 子组件将要传过来的数据绑定一个名称,如子组件 data 里有个 user 对象,声明的时候在 slot 里加一个
<slot name="one" :info="user"></slot>
,就能把变量传给父组件 - 父组件中在 v-slot:one 后面加一个=”XXX”就能获取到,如:
<card><template v-slot:one="msg" >{{msg.info.name}}</template></card>
生命周期
- 生命周期的方法直接写在最外层
- 十个方法
- 创建组件前执行 beforeCreate(){}
- 创建完组件执行 Created(){}
- 模板编译之前(挂载 dom 之前)执行 beforeMount(){}
- 模板编译之后(挂载 dom 之后)执行 mounted(){}
- 数据更新之前 beforeUpdate(){}
- 数据更新完成之后 Updated(){}
- 组件缓存激活时调用 activated(){}
- 组件缓存停用时调用 deactivated(){}
- 组件销毁之前 beforeUnmount(){}
- 组件销毁之后 unmounted(){}
- v-if 与 v-show 的区别:v-if 是销毁,v-show 是隐藏,v-if 调用的是组件是否销毁,v-show 调用的是数据是否更新
- 如果不想让一个组件销毁,可以在外面嵌套一层 keep-alive 给该组件加缓存
- ElementPlus 组件库
相关推荐
阅读 +