Javascript vue组件和vue实例之间的通信

我刚刚开始使用Vue.js，在尝试了一段时间后，我不知道如何将某个组件与Vue实例进行通信。 我将此组件用作评级系统，但我不知道如何将当前值获取到我的主实例 （）

Vue.component（'star-rating'{
道具：{
“名称”：字符串，
“值”：null，
'id'：字符串，
“禁用”：布尔值，
“必需”：布尔值
},
模板：'\
\
★',
/*
*组件数据的初始状态。
*/
数据：函数（）{
返回{
临时值：空，
评级：[1,2,3,4,5]
};
},
方法：{
/*
*鼠标上方星星的行为。
*/
星号：功能（索引）{
var self=这个；
如果（！this.disabled）{
this.temp_值=this.value；
返回此值。值=索引；
}
},
/*
*星星在老鼠窝上的行为。
*/
star_out:function（）{
var self=这个；
如果（！this.disabled）{
返回this.value=this.temp_值；
}
},
/*
*设置分数的等级
*/
设置：函数（值）{
var self=这个；
如果（！this.disabled）{
//使用Vue.Resource调用LaravelAPI
该温度值=温度值；
返回此值。value=value；
}
}
}
});
新Vue({
el:“#应用程序”
});

欢迎来到Vue

一开始可能会有点困难，但传递属性的方式是通过

道具

。为此，您需要首先在父对象（在本例中为应用程序实例）上定义一个

data

对象

中有一些关于道具的好例子。
一般来说，这是您的工作方式：

new Vue({
  el: '#app',
  data: function () {
     return {
        foo: 'Foo'
     }
  }
});

Vue.component('bar', {
  props: { foo: String },
  template: '<span> {{ foo }}</span>'
})

newvue({
el:“#应用程序”，
数据：函数（）{
返回{
福：“福”
}
}
});
Vue.组件（'bar'{
道具：{foo:String}，
模板：“{{foo}}”
})

…还有HTML

<div id="app">
  <bar :foo="foo"></bar<
</div>

你确定你链接的那个正在工作吗？如果我将鼠标悬停在星星上，什么也不会发生。我没有继续实施您的解决方案（甚至不知道它应该如何准确工作），我只是添加了一个示例来演示如何在公司之间共享数据。由您来实现正确的行为：-）我可以通过使用emit/on来修复它。我认为您的解决方案更适合与子节点进行通信。话虽如此，谢谢你的帮助：）别担心，祝你好运！注意事件，如果事件太多，以后维护代码将变得非常困难：-）
<div id="app">
  <bar :foo="foo"></bar<
</div>