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

目录

动态组件

什么是动态组件

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"进行多层组件监听

$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