vue知识点总结

$attr

特性继承

在父子组件中，如果在父组件中使用子组件时，传入了一些非 props 属性，那么将来这些属性会直接作用在子组件的根元素上

作用

由于特性继承的原因，直接在使用子组件时，传入非 props 属性，这个属性只会作用到子组件的根元素上。可以使用 $attrs 来将这些非 props 属性，传入给子组件中指定的元素

用法

// 父组件
<template>
    <div>
       <son placeholder="你好啊" abc="111" />
    </div>
</template>
// 子组件
<template>
    <div>
        <input type="text" v-bind="$attrs">
    </div>
</template>

注意点

inheritAttrs: 可以用来让子组件的根元素不去继承父组件传入的非 props 属性

// 子组件
<template></template>
<script>
export default {
  inheritAttrs: false
}
</script>

$listeners

作用

直接在子组件中实现父组件中的事件

// 子组件
<template>
    <div>
        <input type="text" v-on="$listeners">
    </div>
</template>

动态组件

<template>
	<div>
		<component :is="comName"></component>
	</div>
</template>

异步组件

同步组件

import login from './login'

异步组件

const Login = () => import('./login')

插槽

概念：在父子组件中，使用子组件时，子组件中的内容可能是固定的。但是有时候又需要将子组件中固定的内容进行替换。就可以使用插槽。

默认插槽

// 子组件
<template>
    <div>
        <slot>可以被替换的内容</slot>
    </div>
</template>
// 父组件
<tempalte>
    <son1>我是要替换插槽的内容</son1>
</template>

具名插槽

// 子组件
<template>
    <div>
        <slot name="content">可以被替换的内容</slot>
    </div>
</template>
// 父组件
<tempalte>
    <son1>
        <template v-slot:content>我是要替换插槽的内容</template>
    </son1>
</template>

作用域插槽

• 作用：在子组件中将参数以插槽的方式传给父组件来使用
• 子组件：
• 父组件