7. Vue实例选项——组合选项

113 阅读3分钟

1. parent—— 指定已创建的实例之父实例

  • 类型Vue instance

  • 详细

    指定已创建的实例之父实例,在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例,子实例被推入父实例的 $children 数组中。

    节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信

    image.png

2. mixins——接收一个混入对象的数组

  • 类型Array<Object>

  • 详细

    mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项,这些选项将会被合并到最终的选项中,使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说,如果你的混入包含一个 created 钩子,而创建组件本身也有一个,那么两个函数都会被调用。

    Mixin 钩子按照传入顺序依次调用,并在调用组件自身的钩子之前被调用

  • 示例

    var mixin = {  
      created: function () { 
          console.log(1) 
      } 
    } 
    var vm = new Vue({   
          created: function () { 
             console.log(2) 
          },   
          mixins: [mixin] 
    }) 
    // => 1 
    // => 2 
    

    image.png

    image.png

  • 参考混入

3. extends——允许声明扩展另一个组件

  • 类型Object | Function

  • 详细

    允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数),而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。

    这和 mixins 类似。

  • 示例

    var CompA = { ... } 
    // 在没有调用 `Vue.extend` 时候继承 CompA 
    var CompB = {   extends: CompA,   ... } 
    

    image.png

4. provide / inject——需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖

  • 类型

    • provideObject | () => Object
    • injectArray<string> | { [key: string]: string | Symbol | Object }
  • 详细

    这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。如果你熟悉 React,这与 React 的上下文特性很相似。

    provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。在该对象中你可以使用 ES2015 Symbols 作为 key,但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

    image.png image.png

    inject 选项应该是:

    • 一个字符串数组,或

    • 一个对象,对象的 key 是本地的绑定名,value 是:

      • 在可用的注入内容中搜索用的 key (字符串或 Symbol),或

      • 一个对象,该对象的:

        • from property 是在可用的注入内容中搜索用的 key (字符串或 Symbol)

        • default property 是降级情况下使用的 value

    image.png image.png

    image.png

    提示:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

  • 示例

    <body>
        <div id="app"><child></child></div>
        <script>
          // 子组件注入 'foo'
          var child = {
            name: "child",
            inject: ["foo"],
            created() {
              console.log(this.foo); // => "bar"
            },
            template: `<span>{{foo}}</span>`
            // ...
          };
          // Vue.component("child", child);
          // 父级组件提供 'foo'
          var Provider = new Vue({
            el: "#app",
            provide: {
              foo: "bar"
            },
            components: {
              child: child
            }
    
            // ...
          });
        </script>
      </body>
    

    image.png

    • 利用 ES2015 Symbols、函数 provide 和对象 inject
    const s = Symbol()
    
    const Provider = {
      provide () {
        return {
          [s]: 'foo'
        }
      }
    }
    
    const Child = {
      inject: { s },
      // ...
    }
    
    • 使用一个注入的inject值作为一个 property 的默认值:
    const Child = {
      inject: ['foo'],
      props: {
        bar: {
          default () {
            return this.foo
          }
        }
      }
    }
    
    • 使用一个注入的inject值作为数据入口:
    const Child = {
      inject: ['foo'],
      data () {
        return {
          bar: this.foo
        }
      }
    }
    
    • 在 2.5.0+ 的注入可以通过设置inject默认值使其变成可选项:
    const Child = {
      inject: {
        foo: { default: 'foo' }
      }
    }
    
    • 如果inject需要从一个不同名字的 property 注入,则使用 from 来表示其源 property:
    const Child = {
      inject: {
        foo: {
          from: 'bar',
          default: 'foo'
        }
      }
    }
    
    • 与 prop 的默认值类似,inject的默认值需要对非原始值使用一个工厂方法:
    const Child = {
      inject: {
        foo: {
          from: 'bar',
          default: () => [1, 2, 3]
        }
      }
    }