Question

我有单个文件组件。我需要创建类似于“数据”但非响应性 PER 组件（不在相同组件之间共享）的变量。我如何在 vue 中做到这一点？

// my-component.vue
    export default {
        data() {
            return {
                reative: 1
            };
        },
        // psevdocode 
        myNonObservableVariables(){
            return {
                simpleField: 3
            }
        },
        methods: {
            method1() {
                // can set
                this.simpleField = 5;
            }
            method2() {
               // can get
               console.log(this.simpleField);
            }
        }

更新 1：例如，我创建了 2 个组件并将随机值分配给“simpleField”并登录到控制台，我需要：

<my-component></<my-component> // console.log -> 555
<my-component></<my-component> // console.log -> 666

在第一个分配新值 = 999 的组件调用方法之后，在此之后：

<my-component></<my-component> // console.log -> 999
<my-component></<my-component> // console.log -> 666

Answer 1

您可以在 this 上的 created 中定义此类变量的自定义映射，如下所示：

const childcomponent = Vue.component('childcomponent', {
  template: '#childcomponent',
  props: ['id'],
  created() { this.myNonObservableVariables = { simpleField: 3 } },
  mounted() {
    let simpleField = this.getNonObservableVariable('simpleField');
    console.log('Before: simpleField', simpleField);
    this.setNonObservableVariable('simpleField', this.id);
    simpleField = this.getNonObservableVariable('simpleField');
    console.log('After: simpleField', simpleField);
  },
  methods: {
    setNonObservableVariable(key, value) {
      this.myNonObservableVariables[key] = value; 
    },
    getNonObservableVariable(key) { 
      return this.myNonObservableVariables[key]; 
    }
  }
});

new Vue({
  el:"#app",
  components: { childcomponent },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="childcomponent"><div><div></template>

<div id="app">
  <div><childcomponent :id="1"/></div>
  <div><childcomponent :id="2"/></div>
</div>

vue 为每个组件创建不可观察的变量

1 个答案: