Vue：从Vue实例更新组件数据

Question

我希望你能够从我的Vue实例中更新组件中的数据。虽然有很多关于如何做相反操作的示例，但对于这个问题却没有找到什么资料。

比如说，我有以下代码：

Vue.component('component', {
props: {
    prop: {
        default: null
    }
},
template: '#template',
data: function () {
    return {
        open: false
    };
}
});

现在我想从我的Vue实例中将open设置为true:

var root = new Vue({
    el: '#root',
    data: {},
    methods: { updateComponentData: function() {//set open to true} } });

- Green_qaue

---

你是否试图使用父组件（例如你的示例中的root）来更新子组件（例如你的示例中的component）？如果是这样，强烈建议遵循一种模式，即从父组件向子组件传递数据，从子组件向父组件传递事件（更多信息请参见Vue文档）。在你的示例中，你的子组件将有一个名为open的prop，而你的父组件将把表示open状态的值绑定到子组件上。 - Wing

如果你的组件关系比父子关系更复杂，你可能需要探索围绕状态管理的模式。 - Wing

如果你将open设置为一个prop，实际上你会收到Vue的警告，告诉你它应该是数据。你能否扩展你的问题，包括这个尝试？我不认为Vue会尝试警告你关于这个。 - Wing

我试图从实例（根）传递数据到组件（component）。但它们是分开的，所以不确定是否算作父子关系。即组件不存在于Vue实例内部。不太确定您的意思，您可以扩展问题，包括更具代表性的组件层次结构示例。组件之间的“父子”关系是指子组件是父组件的直接后代；在父模板中，它可能看起来像这样：<div>...<child-component>...</child-component>...</div>。 - Wing

谢谢，root 不是一个组件。即 component 不是 root 的子级。root 是一个 Vue 实例。它们不是同一种东西。 - Green_qaue

Answer 1

您可以通过子组件引用来完成此操作。

<script type="text/x-template" id="template" ref="component">
    <div>Hello, {{ name }}!</div>
</script>

var root = new Vue({
  el: '#root',
  data: {},
  methods: { 
    updateComponentData: function() {
      this.$refs.component.open = true
    } 
  } 
});

---

工作示例

const Child = Vue.component('child', {
  template: `
    <div>
      <h2>Component1</h2>
      <div>Hello, {{ title }}! <strong>{{ open }}<strong></div>
    </div>
  `,
  data() {
    return {
      title: 'component',
      open: false
    }
  }
});

var root = new Vue({
  el: '#app',
  components: {
    Child
  },
  methods: { 
    updateComponentData: function() {
      //console.log('updateComponentData', this.$refs)
      this.$refs.component1.open = true
    } 
  } 
});

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

<div id="app">
  <h2>Parent</h2>
  <button v-on:click="updateComponentData">Click me true</button>
  <child ref="component1"></child>
</div>

- Richard Matsen

---

这是Vue，参见上面的文档链接，他们在父组件之外使用root.$refs.component，所以我假设在内部使用this.$refs.component。我会去检查一下。 - Richard Matsen

谢谢，据我所知它不起作用。我认为这是因为我们在组件内设置了ref，而不是Vue实例。因此，当我们说this.$refs时，它找不到我们所说的ref，因为它不在实例本身中。 - Green_qaue

你说得对，ref应该放在父模板上。我现在有一个可用的示例了。 - Richard Matsen

谢谢，我正在尝试您的示例，但将“components”添加到我的实例会导致整个页面无法正确编译。我会继续尝试，也许我漏掉了什么。 - Green_qaue

Answer 2

我刚刚尝试了你的代码，以下代码完美运行，请尝试。我使用了Vue的'ref'。在您的组件中添加ref属性，然后您可以从父组件访问该特定组件的数据。

Vue.component('component', {
    props: {
        prop: {
            default: null
        }
    },
    template: '#template',
    data: () => ({
        open: false
    })
});
var root = new Vue({
    el: '#root',
    data: () => ({}),
    methods: {
        updateComponentData: function() {
         this.$refs.myComponent.open = true
        }
    },
});

<script src="https://unpkg.com/vue"></script>
<div id="root">
   <button @click="updateComponentData">Change</button>
    <hr>
    <component ref='myComponent'></component>
</div>
<script type="text/x-template" id="template" ref="component">
    <div>Open: {{ open }}!</div>
</script>

- Yubaraj Shrestha