如何在范围外更改 vue.js 组件数据

Posted 2023-02-16

【中文标题】如何在范围外更改 vue.js 组件数据

【英文标题】：How to change vue.js components data outside scope

【发布时间】：2019-12-18 07:25:30

【问题描述】：

我想在默认导出语句之外更改 vue.js 数据。鉴于下面的示例，我将如何去做？

<template>
    <div>
        <h6 class="font-weight-normal mb-3"> name </h6>
    </div>
</template>

<script>
export default 
    data() 
        return 
            name: ""
        
    


let changeName = (name) => 
    //How do I change the name data property here

</script>

【问题讨论】：

这通常通过props 或slots 完成。

恐怕做不到，因为Vue Loader will only look for stuff inside the default export。问题是你的用例是什么，因为应该有一种与 Vue 工作方式兼容的方式来实现你想要的。

【参考方案1】：

如果您将组件分配给变量/常量，您应该能够简单地触发数据对象的代理设置器或使用组件级方法。

const component = new Vue(
  data() 
    return 
      name: "Initial value."
    
  ,
  
  methods: 
    changeName(newName) 
      this.name = newName;
    
  
);

// Mount it to an element (for demo purposes)
component.$mount('#app');

document.getElementById('btn-setter').onclick = function() 
  component.name = 'Changed with SETTER';
;

document.getElementById('btn-method').onclick = function() 
  component.changeName('Changed with METHOD');
;

// Uncomment this to start exporting it.
// export default component;

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

<div id="app">
  <h6 class="font-weight-normal mb-3"> name </h6>
  
  <button id="btn-setter">Change with setter</button>
  <button id="btn-method">Change with method</button>
</div>

【参考方案2】：

您可以在组件之外的页面中编写任何您想要的函数（或导出语句），但您需要在您的methods 部分或组件中的某个位置调用它。我将它用于创建默认值的函数，而不是从外部导入它们，只需编写一个函数 initVal = () => someVal 然后在 data 或 computed 或某处引用 initVal （没有这个）。