vue [细节点]【动态组件 $attrs】

青旅半醒 2022-10-10 09:44 148阅读 0赞

**目录**

动态组件

什么是动态组件

vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听

$attrs

inheritAttrs

对比

v-on="$listeners"

设置一个全局的属性绑定在Vue上

ref

v-bind

mixin

# 动态组件 #

## 什么是动态组件 ##

通过使用保留的 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。根据 v-bind:is="组件名" 中的组件名去自动匹配组件，如果匹配不到则不显示。改变挂载的组件，只需要修改is指令的值即可。

> 通过` ` 标签声明一块区域，并预言这块区域将来会被某个组件通过 `v-bind:is='componentId'` 来填充。

动态组件通常会结合keep-alive使用.

每次去切换 component 的时候，模板（component 中的 template）总会去重新渲染，而我们知道每次的 DOM 渲染其实是很消耗性能的操作，那么如果想要避免这样反复渲染的话可以通过 标签来告诉`Vue`，去缓存已经被渲染过的 `component`。

的使用非常简单，只需要使用 来包裹住 就可以了。

<keep-alive>
        <component :is="componentId"></component>
    </keep-alive>

import test  from './test.vue'
    ...
    components:{test},
    data() {
        componentId:test
    }

# [vue中使用v-bind="$attrs"和v-on="$listeners"进行多层组件监听][vue_v-bind_attrs_v-on_listeners] #

## $attrs ##

vue组件之间通信，我们可以使用props和vuex两种方式，但是vuex太重，props在多级组件中使用又太麻烦，vue2.4版本提供了另一种方法，**使用v-bind="$attrs"，将父组件中不被认为 props特性绑定的属性传入子组件中**，通常配合 interitAttrs 选项一起使用。

**通过v-bind="attrs"传入内部组件，简单点讲就是包含了所以父组件在子组件上设置的属性（除了`prop`传递的属性、`class` 和 `style` ）。**

## **`inheritAttrs`** ##

### 对比 ###

1.v-bind="$props": 可以将父组件的所有props下发给它的子组件,子组件需要在其props:\{\} 中定义要接受的props。

vm.$props: 当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。

2.v-bind="$attrs": **将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。**在子组件中应当添加inheritAttrs: false(避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。

`　　vm.$attrs` :包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

3.v-on：将父组件标签上的自定义事件向下传递，其子组件可以直接通过emit(eventName)的方式调用。

`　　vm.$listeners`: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。、

例子0：

在别人组件的基础上进行二次封装的时候，**定义好自己的属性，然后在自己的组件上直接传值，然后通过 v-bind="$attrs" 把值传给别人的组件即可**，例如：

<template>
      <div>
        <el-button v-bind="$attrs">确定</el-button>
      <div>
    </template>
     
    // 父组件使用
    <my-button type='primary' size='mini'/>

例子1：【父组件的数据传递给孙子组件展示】

父组件：

<template>
      <div v-bind="$attrs">
        <test1 :fixed="true" />
      </div>
    </template>
    
    <script>  
    import test1 from "./test1.vue";
    export default {
      components: { test1 }
    };
    </script>

子组件：

<template>
      <div>
        子组件
      </div>
    </template>
    
    <script>
    export default {
      mounted() {
        console.log('子',this.$attrs);
      },
    };
    </script>

打印：

> 子 \{fixed: true\}

例子2：

祖父：

<div>
        祖父
        <test1 :fixed="true" />
      </div>
    
    <script>
    import test1 from "./test1.vue";
    export default {
      components: { test1 },
      mounted() {
        console.log("祖父", this.$attrs);
      },
    };
    </script>

父：

<template>
      <div>
        父
        <test v-bind="$attrs"></test>
      </div>
    </template>
    
    <script>
    import test from "./test.vue";
    export default {
      components: { test },
      mounted() {
        console.log('父',this.$attrs);
      },
    };
    </script>

子：

<template>
      <div>子</div>
    </template>
    
    <script>
      mounted() {
        console.log('子',this.$attrs);
      },
    };
    </script>

> 打印：子 \{fixed: true\}  
>            父 \{fixed: true\}  
>            祖父 \{\}

##  v-on="$listeners" ##

祖父：
    <template>
        <div>
            <father fix='111' @asd="asd">
        </div>
    </template>
    
    <script>
    export default {
        methods: {
            asd() {
                console.log(111);
            },
        },
    };
    </script>
    
    父：
    <son v-bind="$attrs" v-on="$listeners" />
    
    子：
    <script>
    export default {
        created() {
            this.$listeners.asd();
            console.log("子", this.$attrs);
        },
    };
    </script>
    
    子组件打印：
    111,
    子，{fix:111}

# 设置一个全局的属性绑定在Vue上  #

在main.js文件里去设置vue的全局属性

import { hasPermission } from './utils/hasPermission';
    
    Vue.use(ElementUI, {locale});
    //设置全局属性
    Vue.prototype.hasPerm = hasPermission

# ref #

其实ref除了可以获取本页面的dom元素，还可以拿到子组件中的data和去调用子组件中的方法

# v-bind #

<a v-bind:href='' /> 绑定a标签的href属性

# mixin #

[vue_v-bind_attrs_v-on_listeners]: https://www.cnblogs.com/jin-zhe/p/13099416.html