Vue--inheritAttrs--使用/教程/实例

简介

说明

        本文用示例介绍Vue的inheritAttrs的用法。

官网

​​Prop — Vue.js​​

​​API — Vue.js​​

inheritAttrs简介

官网原话：默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。

注意：这个选项不影响 class 和 style 绑定。

示例

初始版本

components/CompA.vue 

<template>
  <div id="compA">
    <comp-b type="checkbox">
    </comp-b>
  </div>
</template>
<script>
import CompB from "@/components/CompB";

export default {
  components: {CompB},
};
</script>

components/CompB.vue

<template>
    <input type="button" value="abc">
</template>
<script>
export default {
};
</script>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import CompA from "@/components/CompA";

Vue.use(Router)
Vue.use(VueAxios, Axios);

export default new Router({
  routes: [
    {
      path: '/compA',
      name: '/compA',
      component: CompA
    }
  ]
})

测试

访问：​​http://localhost:8080/#/compA​​

结果：父组件的属性覆盖了子组件同名的属性

修改版

那如果我想要保留子组件的属性，还想要获得父组件同名类型的定义该怎么办呢？见下方

只修改components/compB.vue

<template>
    <input type="button" value="abc" @click="showAttr">
</template>
<script>
export default {
  inheritAttrs: false,
  methods:{
    showAttr() {
      alert(this.$attrs.type)
    }
  }
};
</script>

测试

访问：​​http://localhost:8080/#/compA​​

结果：父组件的属性没有覆盖子组件同名的属性

点击按钮：获取到父组件的同名属性