Vue 子父组件间的传值

1.父组件给子组件传值：

第一步：在父组件中写个数据，例：tohome

 data () {
    return {
      tohome:"给home组件传值",
    }
  },

第二步：在<v-home>上绑定个属性，例:title

<v-home :title="tohome"></v-home>

第三步：子组件利用props接收父组件的传值

 方法一 props:{
      'title':String,
      'bool':Boolean,
      'getFun':Function
  },
 方法二 props:['title','bool','getFun','parent']

第四步：在子组件上绑定传过来的数据

<p>{{title}}</p>

注：传函数时不能绑定值，可在mounted中执行方法

2.父组件获取子组件的所有方法、属性 ref this.$refs

第一步：给<v-home>命名ref为home-data

第二步：在触发事件时写this.$refs.home-data

 getchildmsg(){
      let elehome=this.$refs.home_data;
      console.log(elehome);
    },

3.子组件获取父组件的整个对象(两种方法) 

方法一：this.parent

第一步：

<v-home :parent="this"></v-home>        //this指父组件

第二步：子组件接收parent

 props:['t itle','bool','getFun','parent']

第三步：在渲染完成后直接输出this.parent

console.log(this.parent);

方法一：直接在子组件中获取

直接在渲染完成后输出this.$parent

console.log(this.$parent);

4.非父组件之间的传值:使用vue里面的全局广播(事件的监听)

例：list组件给home组件传值

第一步：建立一个全局文件Emit.js     ①导入vue ②实例化vue ③暴露出去

import vue from 'vue';
//实例化vue 全局广播
let emit=new vue();
export default emit;

第二步：在发送方导入Emit（广播和接收广播时都要导入），触发广播Emit.$emit

//在哪里广播导入vue全局的对象
import Emit from '../Emit/Emit.js';

 methods:{
    sendhome(){
      Emit.$emit("tohomedata",this.tohome);      //Emit.$emit触发广播("事件"，传值)
    }
  },

③在接收方导入，用监听接收广播

  mounted(){
      //接收非父组件之间的广播传值
      Emit.$on("tohomedata",(res)=>{
        //console.log(res);
        this.rehome=res;
      })
  }

④在数据里定义一个变量接收传过来的值（rehome）