组件之间的传值：1）父子组件之间的传值 2）非父子组件之间的传值

1、父子组件之间的传值

 

1）父组件向子组件传值

 

 

 

 

 

 注意子组件接受的参数，不要和自身属性的值一样，以msg为例：

父组件：

 

 

 子组件：

 

 

 虽然显示，但是报错了：

 

 

 

父组件给子组件传值不仅可以传数据还可以传方法：

 

 

 

run(){
  alert('我是Home组件的run方法');
}
子组件接收：

 

 

 子组件点击执行父组件的run方法：

 

 

 

 

 

 

子组件执行父子间的方法：

子组件：

 

父组件接收参数：

 

 

 

 

 

点击子组件的按钮：

 

 

 既然可以把方法传给子组件，也可以把父组件整个实例传过去：

1、

 

 

 

 

 

 

2、子组件接收home

 

 

 

 

 

 

 

 加一个按钮执行父组件的数据和方法：

 

 

 

 

子组件通过props验证数据的合法性:

 

 

 

 

 

 

 

2）父组件主动获取子组件的数据和方法

 

父组件：

 

 

getChildData(){
    alert(this.$refs.header.msg);
}

 

 

 

 

 

 

 

3）子组件主动获取父组件的数据和方法

 

<button @click="getParentData()">获取父组件的数据和方法</button>

获取父组件的属性：
getParentData(){
    alert(this.$parent.msg)
}

获取父组件的方法：

getParentData(){
    this.$parent.run();
}

 

 

2、非父子组件之间的传值

1）实例一个vue实例并暴露出去

 

 在需要应用的组件上引用这个vue实例

Home组件News组件传值：

 

 

 

<button @click="emitNews()">给News组件广播数据</button>

emitNews(){
         VueEvent.$emit('to-news',this.msg);
}
New组件：

 

 

 

 总结：