Question

在一个独立的Vue.js脚本中，我可以混合函数和Vue data：

var vm = new Vue ({
(...)
  data: {
    number: 0
  }
(...)
})

function return100 () {
  return 100
}

vm.number = return100()

因此，我有一个Vue实例（vm）data可通过vm.<a data variable>直接寻址

这样的寻址在组件中是如何工作的，因为没有显式实例化Vue的实例？

// the component file
<template>
(...)
</template>

<script>

function return100 () {
  return 100
}

export default {
  data: function () {
    return {
      number: 0
    }
  }
}

// here I would like to set number in data to what return100() 
// will return
??? = return100()

</script>

Answer 1

您可以使用此类代码来实现目标。

<template>
  <div>{{ name }}</div>
</template>

<script>
const vm = {
  data() {
    return {
       name: 'hello'
    };
  }
};

// here you can modify the vm object
(function() {
  vm.data = function() {
    return {
      name: 'world'
    };
  }
})();

export { vm as default };
</script>

但我真的不建议您以这种方式修改数据，我认为它可以被视为Vuejs中的反模式。
在我遇到的几乎所有用例中，都可以通过使用Vue lifecycle来完成。例如，我更喜欢用下面显示的样式编写代码。

<template>
  <div>{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
       name: 'hello'
    };
  },
  mounted() {
    // name will be changed when this instance mounted into HTML element
    const vm = this;
    (function() {
      vm.name = 'world';
    })();
  }
};
</script>

如何从该组件中处理组件的数据？

1 个答案: