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

我想从我的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} } });

---

你应该能用一只手做这件事

你好，{{name}}！

var root=新的Vue({
el:'根'，
数据：{}，
方法：{
updateComponentData:函数（）{
此.$refs.component.open=true
} 
} 
});

---

工作示例

const Child=Vue.component（'Child'{
模板：`
组件1
你好，{{title}！{{{open}}
`,
数据（）{
返回{
标题：“组件”，
开放：假
}
}
});
var root=新的Vue({
el:“#应用程序”，
组成部分：{
小孩
},
方法：{
updateComponentData:函数（）{
//log（'updateComponentData'，this.$refs）
此.$refs.component1.open=true
} 
} 
});

父母亲
单击“我是真的”
我刚刚玩了你的代码，下面的代码非常好用，请尝试一下。我使用了Vue“ref”。在组件中添加
ref
属性，然后可以从父级访问特定组件数据


Vue.component（'component'{
道具：{
道具：{
默认值：null
}
},
模板：“#模板”，
数据：（）=>({
开放：假
})
});
var root=新的Vue({
el:'根'，
数据：（）=>（{}），
方法：{
updateComponentData:函数（）{
此.$refs.myComponent.open=true
}
},
});

改变

打开：{{Open}}！
这是Vue，请参见上面的文档链接，它们在父级之外使用
根$refs.component
，因此我假设
这是内部的$refs.component。我会检查的。谢谢，据我所知，它不起作用。我认为是因为我们在组件中设置了ref，而不是Vue实例。所以当我们这样说时，$refs没有找到我们正在讨论的ref，因为它本身不在实例中。你是正确的，ref在父模板上。我现在有了一个工作示例。谢谢，我正在尝试您的示例，但是将
组件添加到我的实例中会导致整个页面无法正确编译。我会继续尝试，可能我遗漏了什么您是否试图使用父组件（示例中为根组件）更新子组件（示例中为组件）？如果是这样，强烈建议遵循这样一种模式：数据从父级传递到子级，事件从子级传递到父级（）。在您的示例中，您的孩子将有一个名为
open
的
prop
，您的家长将代表
open
状态的值绑定到子组件。如果您的组件关系比父子关系更复杂，您可能希望探索围绕该组件旋转的模式。问题是，如果将
open
设置为
prop
，实际上会收到一条vue警告，告诉您应该是数据。无论哪种方式，正如您所说，我尝试将数据从实例（根）传递到组件（组件）。但它们是分开的，所以不确定是否算作亲子关系。i、 e该组件在vue实例中不存在。如果您认为您有解决方案，请发布一个答案，因为我在您链接的文档中花费了数小时，但没有真正成功。“如果您将
open
设置为
prop
，您实际上会收到一个vue警告，告诉您应该是数据”–您是否会扩展您的问题以包括此尝试？我不希望Vue试图就此向您发出警告。“我尝试将数据从实例（根）传递到组件（组件）。但它们是分开的，因此不确定它是否算作父子。也就是说，该组件不存在于Vue实例中。”–不太确定您的意思，您可以将问题扩展为包含一个更能代表组件层次结构的示例。组件之间的父子关系是指子组件是父组件的直接后代；在父级模板中，它可能看起来像这样：
…
。