vue父子于非父子组件传值方式

父子组件传值

1. props/$emit

//父向子
  //父
    <child v-bind:msg="aaaa"><child>
  //子
    props:{
      mag:{
        type:string,//接受类型
        default:""//默认值
      }
    }
//子向父  
  //子
  <button @click="passMsg">传输</button>
  methods:{
    passMsg(){
                //showMsg自定义事件名称  nihaobaba参数
      this.$emit('showMsg',"nihaobaba")
    }
  }
  //父
        //监听事件
  <child @showMsg="showMsg1"><child>
  data(){
    return:{
      msg=''
    }
  }
  methods:{
    showMsg1(Msg){
      this.msg=Msg
    }
  }

2. parent/children

//父组件获取子组件所有信息
  this.$children
 //子组件获取父组件所有信息
 this.$parent

3. ref

//父组件获取子组件
  //父
     <fu>
  	    <child ref="child"><child>
        <child2 ref="child2"><child2>
     </fu>
    this.$refs.child2