- 样式类
对象绑定:
数组绑定:
组件绑定:(如果您的组件有多个根元素,您需要定义哪个组件将接收此类。您可以使用 a t t r s 组件属性执行此操作 , v − b i n d = " attrs组件属性执行此操作, v-bind=" attrs组件属性执行此操作,v−bind="attrs" 也会继承父组件的事件)
(禁用属性继承:如果你不希望组件的根元素继承 attribute,可以在组件的选项中设置 inheritAttrs: false)
2.修饰符
- 鼠标按钮修饰符 .left .right .middle
- …
3.组件
4.props 和 emits
都可以设置校验,但不通过校验,只会在控制台告警,不会影响传参,和事件触发。
5.组件可以用v-model:arg 绑定多个值,子组件可以使用update:arg更新值
6.自定义修饰符
7.插槽(缩写方法: v-slot:header 可以被重写为 #header)
#具名插槽,默认插槽(name: default)
v-slot 只能添加在 上 ,除非当被提供的内容只有默认插槽时,组件的标签才可以被当作插槽的模板来使用。
#作用域插槽
8.异步组件
#Suspense 异步组件
9.transition (https://v3.cn.vuejs.org/guide/transitions-enterleave.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F)
当只用 JavaScript 过渡的时候,在 enter 和 leave 钩子中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。添加 :css=“false” 也会让 Vue 会跳过 CSS 的检测,除了性能略高之外,这也可以避免过渡过程中受到 CSS 规则的意外影响。
setup
在 setup 中你应该避免使用 this,因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前,所以它们无法在 setup 中被获取。
setup 选项是一个接收 props 和 context 的函数
- 传值几种方式总结:
1. props
2.$emit
3.expose / ref : 子组件expose 暴露,父组件ref.value.暴露出去的值
4.$attrs
5.v-model:
6.provide / inject: 传输的数据尽可能保证在provide 端进行操作,避免在inject操作,否则数据异常,定位混乱。(如果要确保通过 provide 传递的数据不会被 inject 的组件更改,我们建议对提供者的 property 使用 readonly,例如: provide('location', readonly(location)),
也可在provide 端,定义操作的方法,一并提供给inject端
)
7.Vuex
- watch 和 watchEffect区别
watch需要手动传入依赖,需要初始化执行,要配置 {immediate: true} , watchEffect每次初始化时会执行一次回调函数来自动获取依赖,如果需要它DOM 更新后运行,可以配置{flush: ‘post’},(flush默认是pre,也可以接收sync,这将强制效果始终同步触发);从 Vue 3.2.0 开始,watchPostEffect 和 watchSyncEffect 别名也可以用来让代码意图更加明显。
watch 可以获取到原值,watchEffect,不行。
- 自定义合并策略
minxin自定义合并策略:
app.config.optionMergeStrategies.custom = (toVal, fromVal) => {
return fromVal || toVal
}
toVal:子实例 , fromVal:父实例
- teleport
<teleport to="#modals"> <div>A</div> </teleport> <div>A</div>
将会被插入到id=modals 的标签内末尾
- 渲染函数
default: (props) => Vue.h(‘span’, props.text) 插槽也可以简写成这样
- html传参
- 移动端
补充:
vue父子组件实现双向绑定
// 父组件中引用子组件, :form.sync --- 实现数据的双向绑定 --- vue2
<Form :form.sync="form" :list="formList">
// 上方的.sync写法是下方写法的简写方式
<Form v-bind:form="form" v-on:update:form="form=$event" :list="formList"/>
--------------------------------------------------------------------
// 父组件
<Form v-model:form="form" :list="formList">
// 子组件
$emit('update:form',新的值)
通过model属性来更改传入的键名
<Form v-model="form" :list="formList">
//子组件的写法
export default {
model: {
prop: "form", // 需要对哪个接收的键名进行修改
event: "formChange", // 修改后的触发父组件更新的方法名
//不修改的状态下
//1.如果是v-model传参,则默认触发父组件的方法名为update:value
//2.如果是v-model:xx传参,则默认触发父组件的方法名为update:xx
},
props: {
form: { // v-mode传入的值
type: Object,
default: () => {}
}
},
methods: {
handelChange() {
this.$emit("formChange", {...}); // 修改 form 值
}
}
}
各透传示例: