前端之家收集整理的这篇文章主要介绍了
vue中各组件之间传递数据的方法示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
@H_3010@前言
@H
301_0@本文主要给大家介绍了关于vue组件之间传递数据的相关资料，
分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：
@H_
301_0@
作用域
@H_
301_0@在vue中，组件实例的作用域是孤立的，父组件模板的
内容在父组件作用域内编译；子组件模板的
内容在子组件作用域内编译。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。
@H_
301_0@下面几种
方法可以实现组件之间数据的传递。
@H_
301_0@
一、通过prop传递数据
@H_
301_0@1）在子组件中，使用prop
属性，
显示的表明，它所需要的数据。
@H_
301_0@2）在父组件中，需要引用子组件的地方，传入数据。
@H_
301_0@
具体看下面的代码：
Vue.component("my-item",{
template:"
这是组件,{{value}}
",props:["value"],//声明需要的数据，HTML 特性是不区分大小写的,所以此处如果为驼峰命名法，如：myMessage，则在模板中需要转化为用断线隔开的形式：my-Message
data:function(){
return {
}
},methods:{
}
});
//创建vue实例
const vm=new Vue({
el:"#app",data:{
value:"这是父组件的数据",},methods:{
},});
注意：这种方式是单向数据流，当父组件的属性变化时，将传导给子组件，但是不会反过来。当你想改变prop中数据时，可采用如下方法：定义一个局部变量，并用 prop 的值初始化它，或者使用计算属性。
@H_301_0@
@H_301_0@自定义事件可以实现子组件向父组件传递数据，具体方法如下：
@H_301_0@1）在子组件中使用$emit(eventName,[...args])触发事件，传递数据
@H_301_0@2）在父组件中$on(eventName,callback)监听事件，接受数据作为回调函数的参数，并执行回调函数。
@H_301_0@其实这种方法和angular中控制器之间传递数据的有点类似的。注意触发和监听事件的事件类型必须要保持一致，才可接受导数据。具体看下面的例子：
Vue.component("my-item",{
template:"",data:function(){
return {
count : 0,}
},methods:{
add:function(){
this.count+=1;
this.$emit("cli",this.count);//触发当前实例上的事件。多个参数可以数组的形式传递
}
}
});
//创建vue实例
const vm=new Vue({
el:"#app",data:{
number:""
},methods:{
totlcli:function(num){//这个回调在父组件监听到事件时，执行的，其参数为触发事件时传递的。
return this.number=num;
},});
