preface

In my previous article on vUE interviewing (what interviewers want to hear during interviews), I explained how to use the various component values.

Props, $emit, eventbus, vuex, $parent / $children/ref, sessionStorage, localStorage, route parameter pass (also pass value) And everyone who uses VUE can not not know, so this article will not explain, but now introduce a few usually not common ways of passing values. If you have any questions about the above, please leave a message in the comments. Thank you for taking the time to read my book.

1. provide/ inject

Parent components provide variables through provide, and child components inject variables through Inject. Note: If A is the parent component B and C are children of A and D is A child of B, then provide is used to define variables in A. If A is the parent component B and C are children of A, D is A child of B. In components B, C, and D, the value transmitted can be obtained through inject. (Variables defined in provide are not available in the parent component)

Note: Provide and Inject mainly provide use cases for high-level plug-in/component libraries. Direct use in application code is not recommended. (Official document Description)

The parent component

export default {
    data () {
        return {}
    },
    provide: {
        index: 'Data from index'}}Copy the code

Child components

export default {
    data () {
        return {}
    },
    inject: ['index'}}}}}}}Copy the code

2. $attrs

Call child component three from parent component A:

  1. $attrs = {} when props: [‘custom’,’custon];
  2. $attrs = {custon: ‘ton’} when: [‘custom’];
  3. $attrs = {custom: ‘Tom ‘, custon: ‘ton’};


< props / $attrs;

And variables that are not used by the component are displayed in the HTML structure, for example:

<div custon="ton">
    <p>three---tom</p> >
    <p>attr---{}</p>
</div>
Copy the code

When you add inheritAttrs to a child component, you can hide custon=”ton” on the div tag. When you add inheritAttrs to a child component, you can hide custon=”ton” on the div tag by setting it to false. Note: Setting inheritAttrs to false does not affect use of $attrs.

3.$listeners

$Listeners use $attrs to intergenerational the values of the parent component to the child component. The $listeners use $attrs to intergenerational the values of the parent component to the child component. $Listeners use $listeners to intergenerational the values of the parent component to the child component.

$Listeners are now calling the notice on the parent component. function(){… $Listeners can now access the customEvent directly or using $Listeners to notice the customEvent on the listeners.

The parent component A

<template>
<div>
    <custom-three :custom="custom" :custon="custon" @customEvent="customEvent"></custom-three>
</div>
</template>

<script>
import customThree from './chuanzhi/three'
export default {
    data () {
        return {
            custom: 'tom',
            custon: 'ton'
        }
    },
    components: {
        customThree
    },
    mounted () {},
    methods: {
        customEvent(data) {
            console.log('data', data)
        }
    }
}
</script>
Copy the code

Subcomponents three

<template>
    <div>
        <p>three---{{ custom }}</p>
        <p>attr---{{$attrs}}</p>
        <p>-------------------------------------</p>
        <custom-four v-bind="$attrs" v-on="$listeners"></custom-four>
    </div>
</template>

<script>
import customFour from './four'
export default {
    data() {
        return {}
    },
    components: {
        customFour
    },
    props: ['custom'],
    inheritAttrs:false
    created() {
        console.log('1', this.$listeners)
    }
}
</script>
Copy the code

Subcomponents four

<template>
    <div>
        <p>four---{{ custon }}</p>
        <p>attr---{{$attrs}}</p>
        <el-button @click="fashe"</el-button> </div> </template> <script>export default {
    data() {
        return {}
    },
    props: ['custon'],
    inheritAttrs:false
    created() {
        console.log('2', this.$listeners)
    },
    methods: {
        fashe() {
            this.$emit('customEvent'.'piupiupiu')
        }
    }
}
</script>
Copy the code

Observable Manages state

Observable makes an object responsive. It is used internally by Vue to process objects returned by the data function.

The returned object can be used directly in rendering functions and computed properties, and will trigger an update if it changes. Can also be used as a minimal cross-component state store for simple scenarios:

Calling setCount in component 1 increases or decreases count by 1, and the count called in each component changes and triggers a component refresh

Store. Js file

import vue from 'vue';
export const store =  vue.observable({count: 0});
export const mutation = {
  setCount( count ){ store.count = count; }}Copy the code

Component 1

<template>
  <div class="hello">
    <p @click="setCount(testCount + 1)">+</p>
    <p @click="setCount(testCount - 1)">-</p>
    <test />
    <p>{{testCount}}</p>
  </div>
</template>

<script>
import test from './test'
import { store,  mutation} from './store.js'
export default {
  name: 'HelloWorld',
  components: {
    test
  },
  methods: {
    setCount: mutation.setCount
  },
  computed: {
    testCount() {return store.count
    }
  }
}
Copy the code

Component 2

<template>
  <div>test{{testCount}}</div>
</template>
<script>
import { store } from './store.js';
export default {
  computed: {
    testCount() {return store.count
    }
  }
}
</script>
Copy the code