Vue -- options -- use / tutorial / instance

Keywords: Javascript Front-end Vue Vue.js

Original website:

brief introduction

explain

This article illustrates the use of Vue's options with examples. Includes: combination options and other options.

The combination options will be introduced: mixin, provide/inject; Other options are described: inheritAttrs.

Official website

API — Vue.js

Options / combinations

mixin

brief introduction

Mixin is a better pattern for reusing code. The meaning of interface, implements, extensions and other keywords in Java, Object C is to make the code reusable and inherited. Similarly, in vue, mixin is used to realize reusability.

Mixin actually realizes the "composite pattern" in the "design pattern" in a more concise and understandable way by using the characteristics of the language (keywords). You can define a public class called "mixin". Then let other classes include mixin through the "include" language feature, and directly have various methods and data provided by mixin.

Official website

Blending - Vue.js

example

src/mixins/SayHello.js

export default {
  data() {
    return {
      mixinName: "SayHello.js"
    }
  },
  methods: {
    sayHello(name){
      return "hello," + name;
    }
  }
}

src/components/CompA.vue

<template>
  <div class="compA">
    <p>{{ mixinName + ": " + sayHello(name) }}</p>
  </div>
</template>

<script>
import SayHello from "@/mixins/SayHello";

export default {
  mixins: [SayHello],
  data() {
    return {
      name: 'Tony'
    }
  }
}
</script>

<style scoped>
</style>

src/router/index.js

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

Vue.use(Router)

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

test

visit: http://localhost:8080/#/compA

provide/inject

Other web sites

Vue dependency injection: provide/inject - vue pit entry Summary - Zhou army's personal website
Vue dependency injection - Provide/Inject - short book
vue dependency injection_ Ocean_Fine blog - CSDN blog_ vue dependency injection

brief introduction

The $parent attribute allows child components to access parent components, but it is difficult for child components to access ancestor components. Cross level access to the data of ancestor components can be easily realized through provide/inject, and its usage is exactly the same as that of props.

The provide and inject data are not responsive, and the changed provide data will not respond to the injected value of the inject; If a listener object is passed in, its object properties are still responsive.

provide is equivalent to the enhanced parent component prop, which can span intermediate components, and inject is equivalent to the props of the enhanced child components

provide: it is an object or a function that returns an object. It can contain all attributes or attribute values to be passed to descendant components. Pay attention to the pointing of this when using object mode.
inject: it can be a string array or an object. The property value can also be an object.

Disadvantages and limitations

Provide and inject mainly provide use cases for high-level plug-in / component libraries. The official does not recommend using them in application code. The reason is very direct: they are afraid that you "can't manage well"

Design projects usually pursue clear data flow and reasonable component hierarchical relationship to facilitate debugging and maintenance. However, this option supports access at any level, resulting in difficult data tracking. I don't know which level declares provide or which level uses inject. Causing relatively large maintenance costs. Therefore, in addition to component libraries or high-level plug-ins, Vue recommends using Vuex solutions or other methods..

example

router/index.js

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

Vue.use(Router)

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

components/CompA.vue

<template>
  <div class="compA">
    <p>CompA</p><hr>
    <comp-b></comp-b>
  </div>
</template>

<script>
import CompB from "@/components/CompB";

export default {
  components: {CompB},
  data() {
    return {
      firstName: "Tony",
    }
  },
  methods: {
    method1(){
      alert("this is method1")
    }
  },
  provide(){
    return {
      data1: this.firstName,
      method1: this.method1
    }
  }
}
</script>

<style scoped>

</style>

components/CompB.vue

<template>
  <div class="compB">
    <p>CompB</p><hr>
    <comp-c></comp-c>
  </div>
</template>

<script>
import CompC from "@/components/CompC";
export default {
  components: {CompC}
}
</script>

<style scoped>

</style>

components/CompC.vue

<template>
  <div class="compC">
    <p>CompC</p>
    <p>{{this.data1}}</p>
    <button @click="this.method1">here</button>
  </div>
</template>

<script>
export default {
  inject:['data1', 'method1']
}
</script>

<style scoped>

</style>

test

visit: http://localhost:8080/#/compA

result

Press the button

Options / others

inheritAttrs

Other web sites

vm.$attrs [Vue 2.4.0 added inheritAttrs, detailed explanation of attrs] - brief book

brief introduction

Original words of the official website: by default, attribute bindings of the parent scope that are not recognized as props will be "rolled back" and applied to the root element of the child component as ordinary HTML features. When composing a component that wraps a target element or another component, this may not always behave as expected. By setting inheritAttrs to false, these default behaviors will be removed. The instance attribute $attrs (also added in 2.4) can make these features take effect, and can be explicitly bound to non root elements through v-bind.

Note: this option does not affect class and style bindings.

example

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
    }
  ]
})

test

visit: http://localhost:8080/#/compA

Result: the property of the parent component overrides the property of the child component with the same name

improvement

What if I want to keep the properties of the child component and get the definition of the type with the same name as the parent component? See below

Modify only components / compob.vue

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

test

visit: http://localhost:8080/#/compA

Result: the parent component's property does not override the component's property with the same name